I’m curious if anyone has tried using web components in with zola?
Or if you have any suggestions about how to go about it.
I was thinking of using web components built with stencil. Svelte components compiled into web components is another possibility.
Ideally, they would be hydrated client side to minimise the amout of js to pull down on first load. I’d just use them to have litttle touches here and there of interactivity. I was impressed by how elderjs manages to hydrate svelte components (not compiled as web components mind) as inspiration.
I would be interested in a way to render svelte components as server side rendered HTML, but elder.js is built around the svelte compiler.
In zola you would have to double-define your templates: the zola version, and the svelte version that would then replace the original DOM element. That means also duplicating the data: in the HTML statically rendered and in a JS object to hydrate svelte. Does compiling to web components solve that?
If you compile a svelte component into a web component it can then be included in static html (as long as you have a link in the html to load the required js!) just like any other element.
Of course, it’s can’t share variables / state with zola or anything
You’d also still need the svelte compiler to build the web components.
I think Zola and/or web components themselves lack support for hydrating. I was being a bit of a “magpie dev” - loving the shiny things, when asking for that I think.
I’ve run a quick test and loaded a shoelace color picker component with nothing more than their js link <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.27/dist/shoelace/shoelace.esm.js"></script>
and throwing the element into a template, like index.html. <sl-color-picker>
It works fine - which is obvious in hindsight.
This will load all the javascript needed for the web component(s) on page load, but it’s pretty cool
- which is obvious in hindsight.