You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When delivering HTML documents, often parts of the document are ready in the server before others. This order might not be the same as the DOM order.
For example, a <select> might appear early in the DOM, with the <option> elements for it fetched from a database in parallel, or 3rd party widgets that have a placeholder that gets filled later.
What solutions exist today?
Some frameworks like React & Svelte offer support for out-of-order streaming. React does so by injecting inline <script> elements that modify the DOM.
How would you solve it?
Suggesting to introduce <!marker> nodes and a marker attribute to define a target/sink/outlet, and extending the <template> element to make it into a patch:
This replaces just the <!marker> node. <!marker start> and `<!marker end> replaces a range intead:
<sectionmarker="more-content"><p>Some content</p>
<!marker start><p>Loading more content...</p>
<!marker end></section><templatefor="more-content"><p>More content</p></template>
Additional/supporting APIs
Markers can be named for more complex scenarios
The outlet lookup is done with the template's parent as the scope, so those patches can't be deeply nested and then target some external element. An exception is that patches that are direct descendants of <body> can target the whole document.
In addition, the lookup is tree-scoped and has no affordances for escaping the shadow root.
Gritty details:
Scripts that are part of a patch are executed as normal if performed as part of the main parser.
Scripts, styles, other RAWTEXT elements (e.g. xmp), <plaintext> and the document (HTML) element cannot be directly streamed into. Markers surrounding such elements can be used to replace the elements instead.
From a parser perspective, a setup similar to fragment parsing is set up inside the <template>'s stack of open items. This makes parsing behave like parsing into the context element and into the <template> at the same time. The insertion target is the context element.
What problem are you trying to solve?
When delivering HTML documents, often parts of the document are ready in the server before others. This order might not be the same as the DOM order.
For example, a
<select>might appear early in the DOM, with the<option>elements for it fetched from a database in parallel, or 3rd party widgets that have a placeholder that gets filled later.What solutions exist today?
Some frameworks like React & Svelte offer support for out-of-order streaming. React does so by injecting inline
<script>elements that modify the DOM.How would you solve it?
Suggesting to introduce
<!marker>nodes and amarkerattribute to define a target/sink/outlet, and extending the<template>element to make it into a patch:This replaces just the
<!marker>node.<!marker start>and `<!marker end> replaces a range intead:Additional/supporting APIs
<body>can target the whole document.Gritty details:
<plaintext>and the document (HTML) element cannot be directly streamed into. Markers surrounding such elements can be used to replace the elements instead.<template>'s stack of open items. This makes parsing behave like parsing into the context element and into the<template>at the same time. The insertion target is the context element.Potential future enhancements
srcattribute))