Show HN: Phooos – Pure HTML Out-of-Order Streaming Without JavaScript

by niutech • 2 years ago

3 2 2 years ago

aprilnya• 2 years ago

If I'm understanding correctly, the TLDR is

    <template shadowrootmode="open">
        <slot name="thing">Loading...</slot>
    </template>

    <!-- then, later, at the end, with streaming -->
    <div slot="thing">Content</div>

and the <slot> with name="thing" will get replaced by the <div> with slot="thing"? This is really cool

niutech• 2 years ago

Yes it is. And it is supported by all modern browsers (https://caniuse.com/declarative-shadow-dom), for older browsers you can add a tiny polyfill. Keep in mind that you need to link CSS stylesheet inside Declarative Shadow DOM or use CSS ::part() from outside of it.

Show HN: Phooos – Pure HTML Out-of-Order Streaming Without JavaScript

Related Stories