v148 · HTML · Streaming

Template Slots Demo

Watch out-of-order streaming in action: 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.

Checking <template for> streaming support…

Speed:

Out-of-order streaming

Placeholders reserve layout space. Content fills slots as chunks arrive — any order.

In-order streaming (comparison)

Traditional: items block on the previous one. Slow items stall the whole feed.

Stream log

Press "Start stream" to begin.

Template for syntax

<!-- Server sends placeholders immediately -->
<div id="feed">
  <template for="item-1"></template>
  <template for="item-2"></template>
  <template for="item-3"></template>
</div>

<!-- Later chunks can fill slots out of order -->
<template slot="item-3">
  <article>Item 3 (arrived first)</article>
</template>

<template slot="item-1">
  <article>Item 1 (arrived last)</article>
</template>

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗