{
"$type": "site.standard.document",
"bskyPostRef": {
"cid": "bafyreidrx6pb4lncxen6akpzgtdqt7dusgddap44bytjawhtwej2cbmpoi",
"commit": {
"cid": "bafyreigql7qembyy4wk4ss56wbb5p4lrebnzjjlhvqwfpx2mubgvciuyte",
"rev": "3mptxckwwk22c"
},
"uri": "at://did:plc:twegdcgytckr5cxm57gyruxa/app.bsky.feed.post/3mptxcktslk23",
"validationStatus": "valid"
},
"content": {
"$type": "pub.leaflet.content",
"pages": [
{
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://developer.mozilla.org/en-US/docs/Web/API/ProcessingInstruction"
}
],
"index": {
"byteEnd": 32,
"byteStart": 9
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://www.npmjs.com/package/template-for-polyfill"
}
],
"index": {
"byteEnd": 74,
"byteStart": 65
}
}
],
"plaintext": "New HTML Processing Instructions have dropped in Chrome 150 with polyfills that enable out of order HTML streaming with fallbacks. This has historically been a feature bolted onto UI libraries such as React via inline JS snippets that move elements into place as they arrive."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 45,
"byteStart": 32
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 56,
"byteStart": 50
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 91,
"byteStart": 77
}
}
],
"plaintext": "The new processing instructions <?start name> and <?end>, along with the new <template for> attribute enable native, declarative out of order HTML streaming."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Example"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 94,
"byteStart": 84
}
}
],
"plaintext": "Let's assume the following HTML is streamed to the browser, with a delay before the <template> chunk is sent:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.code",
"language": "html",
"plaintext": "<div>\n <?start name=\"placeholder-1\">\n <p>Loading...</p>\n <?end>\n</div>\n<p>More content that isn't delayed</p>\n<template for=\"placeholder-1\">\n <p>Hello, World!</p>\n</template>",
"syntaxHighlightingTheme": "one-dark-pro"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 40,
"byteStart": 10
}
}
],
"plaintext": "Until the <template for=\"placeholder-1\"> arrives the browser will show:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.code",
"language": "html",
"plaintext": "<div>\n <p>Loading...</p>\n</div>\n<p>More content that isn't delayed</p>",
"syntaxHighlightingTheme": "one-dark-pro"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 19,
"byteStart": 9
}
}
],
"plaintext": "Once the <template> is processed, we are left the the result:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.code",
"language": "html",
"plaintext": "<div>\n <p>Hello, World!</p>\n</div>\n<p>More content that isn't delayed</p>",
"syntaxHighlightingTheme": "one-dark-pro"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "So Much More"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://github.com/WICG/declarative-partial-updates"
}
],
"index": {
"byteEnd": 27,
"byteStart": 0
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://github.com/WICG/declarative-partial-updates/blob/main/dynamic-markup-revamped-explainer.md"
}
],
"index": {
"byteEnd": 126,
"byteStart": 90
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://github.com/WICG/declarative-partial-updates/blob/main/preserve-explainer.md"
}
],
"index": {
"byteEnd": 158,
"byteStart": 131
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 184,
"byteStart": 175
}
}
],
"plaintext": "Declarative Partial Updates are so much more than what I've covered here. We get revamped HTML insertion and streaming methods and DOM preservation mechanisms, along with the <?marker> processing instruction to allow for streaming of list like content."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://www.npmjs.com/package/template-for-polyfill"
}
],
"index": {
"byteEnd": 28,
"byteStart": 20
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition"
}
],
"index": {
"byteEnd": 198,
"byteStart": 173
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 208,
"byteStart": 200
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 217,
"byteStart": 210
}
}
],
"plaintext": "As always, get that polyfill and start playing with this today. There is so much you can do today without a framework, or even JavaScript for that matter. Combine this with document view transitions, <dialog>, popover and you can build some awesome declarative experiences."
}
}
],
"id": "019f2ea9-04cb-7997-b4be-bec52dc6bfa9"
}
]
},
"description": "Exciting new declarative partial updates have landed in Chrome 150",
"path": "/3mptxcc5uzs2n",
"publishedAt": "2026-07-04T20:59:16.420Z",
"site": "at://did:plc:twegdcgytckr5cxm57gyruxa/site.standard.publication/3mfhyuarokk2m",
"tags": [],
"title": "Out Of Order HTML"
}