+
+
+
+
+ Quickly computed result
+
+
+
+
+
+ Full result
+
+
+```
+
+### 2. Imperative JS Streaming
+You can now pipe fetch responses directly into the DOM without manual chunk handling.
+
+```javascript
+const main = document.querySelector('main');
+const response = await fetch('/api/partial-update');
+
+// Pipe the stream directly into the element
+await response.body
+ .pipeThrough(new TextDecoderStream())
+ .pipeTo(main.streamHTMLUnsafe({ runScripts: true }));
+
+// Or use the `textStream()` convenience method which streams directly without needing the intermediate `TextDecoderStream()` step
+await response
+ .textStream()
+ .pipeTo(main.streamHTMLUnsafe({ runScripts: true }))
+```
+
+## Use Case Reference Matrix
+
+* **Island Architecture**: Hydrate independent interactive components on top of static HTML without a full framework runtime.
+* **Deferred "Expensive" Blocks**: Deliver the shell of a page immediately and stream database-heavy components as they become available.
+* **Single Page Application (SPA) Updates**: Stream large UI transitions in SPAs using `streamHTML()` instead of waiting for a full JSON payload and manual DOM construction.
+
+## Anti-Patterns & Warnings (DO NOT DO THIS)
+
+* **Do not use OOO streaming for everything.** Over-fragmenting a page can increase the complexity of the stream and potentially delay content if the browser spends too much time patching small nodes.
+* **Do not ignore Trusted Types.** When using `*Unsafe` methods in environments with Trusted Types enforced, ensure you are passing a sanitized policy object if required.
+* **Do not assume script execution order.** Scripts inside a `
` will execute as soon as they are patched into the document. Do not rely on them executing in a specific sequence relative to other deferred templates.
+* **Do not use without a polyfill strategy.** Ensure you have a fallback or use polyfills (`html-setters-polyfill` and `template-for-polyfill`) to support your required browsers until this feature becomes Baseline.
+
+## Fallback strategies
+
+{{ BASELINE_STATUS("template-for") }}
+{{ BASELINE_STATUS("html-setters") }}
+{{ BASELINE_STATUS("html-streaming-setters") }}
+
+You can use polyfills like `template-for-polyfill` and `html-setters-polyfill` to emulate the API surface for non-supporting browsers.