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.
The new processing instructions <?start name> and <?end>, along the new <template for> attribute enable native, declarative out of order HTML streaming.
Let's assume the following HTML is streamed to the browser, with a delay before the <template> chunk is sent:
Example
<div>
<?start name="placeholder-1">
<p>Loading...</p>
<?end>
</div>
<p>More content that isn't delayed</p>
<template for="placeholder-1">
<p>Hello, World!</p>
</template>Until the <template for="placeholder-1"> arrives the browser will show:
<div>
<p>Loading...</p>
</div>
<p>More content that isn't delayed</p>Once the <template> is processed, we are left the the result:
<div>
<p>Hello, World!</p>
</div>
<p>More content that isn't delayed</p>So Much More
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.
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.