Declarative Partial Updates

concepts

1. Streaming Feed

   Watch a server response stream into the page in real time using streamHTMLUnsafe(). Content appears progressively as chunks arrive — no waiting for the full payload before rendering starts.

2. HTML Insertion REPL

   Live playground for the new insertion methods. Type HTML, pick a method — setHTML, appendHTML, replaceChildren — and see it applied to the target element immediately.

3. Template Slots Demo

   Placeholders using <template for="id"> hold positions in the document while content streams in any order — item 3 can arrive before item 1, and the layout stays stable. Compare side-by-side with traditional in-order streaming.

4. Streaming Race Visualizer

   Animated simulation of chunks arriving in the wrong order. Left panel shows raw chunk arrivals with configurable delays; right panel shows the rendered output. Toggle old vs new behavior to see old in-order blocking vs progressive out-of-order rendering. Includes a moveBefore() state preservation demo where input values survive re-ordering.

5. Insertion Method Comparison

   Four tabbed panels comparing innerHTML (legacy/XSS risk), setHTML() (sanitized replace), appendHTML() (sanitized append), and streamHTMLUnsafe() (streaming). A feature matrix table shows 9 dimensions across all four methods. Each panel has a live try-it area with XSS test content that shows sanitization in action.

why it shipped

The existing innerHTML setter has two problems: it blocks until the full string is available (no streaming), and it doesn't compose with the Sanitizer API. Meanwhile, server-rendered HTML often arrives in a linear order that's dictated by backend logic, not by what the browser needs first. Declarative Partial Updates addresses both: streamHTMLUnsafe() lets you pipe a ReadableStream of HTML directly into a DOM element — chunks parse and render as they arrive, exactly like the main HTML parser. The out-of-order variant uses HTML processing instructions as named placeholders that <template for="name"> elements fill once they arrive, enabling island architecture without any JavaScript hydration framework. The JS insertion methods (setHTML, appendHTML, parseHTML) give consistent, sanitizer-aware equivalents to the old innerHTML/insertAdjacentHTML pair.

references

• ChromeStatus — Declarative Document Patching
• Chrome Developers blog — Declarative partial updates
• Chrome 148 release notes
• WICG explainer — declarative-partial-updates
• WICG explainer — revamped HTML insertion methods