Our great sponsors
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
swtl
A Service Worker Templating Language (swtl) for component-like templating in service workers. Streams templates to the browser as they're being parsed, and handles rendering iterables/Responses in templates by default.
Seems like browser support is pretty universal, even says so in the article
> All browsers support streaming HTML
And the caniuse is promising: https://caniuse.com/?search=slot
While it needs a little JS to initialise, that’s easy enough to do with custom elements: https://github.com/gustafnk/h-include
There's a long-standing WHATWG feature request open for it here: https://github.com/whatwg/html/issues/2791
And several userland custom element implementation, like https://www.npmjs.com/package//html-include-element
One of the cool things that you can do with client-side includes and shadow DOM is render the included HTML into a shadow root that has s, so that the child content of the include element is slotted into a shell implemented by the included HTML.
This lets you do things like have the main page be the pre-page content and the included HTML be a heavily cached site-wide shell, and then another per-user include with personalized HTML - all cached appropriately.
Fun stuff!
The underlying `swtl` library is itself pretty interesting.
Note the use of `delayed(...)` in the blog's example code: that's a promise. In a tagged template.
SWTL's `html` allows for this (I think the blog's example follows the simple case here https://github.com/thepassle/swtl/blob/main/html.js#L23). And SWTL's `render` method races the promises (https://github.com/thepassle/swtl/blob/main/render.js#L120) outward.