Nice work! Be nice to get Stencil integrated too. Realise the compilation step might add a wrinkle but should be quite possible to integrate in the rest of the vite pipeline

Static site generation with Web Components The blog and portfolio of Ryosuke Hana

👋 @whoisryosuke.bsky.social
Quick correction to your blog entry whoisryosuke.com/blog/2025/st...
Stencil is not abandoned or in maintenance mode - it's still actively supported by OutSystems (see ionic.io/blog/stencil...) with close to weekly updates. Thanks!

`:host(:not(:first-of-type)) { ... }` ?

no particular reason - I just fell into Stencil via Ionic many moons ago. 2 things I do like - 1) things like docs / types / framework wrappers / SSR is all pretty much there out-of-the-box 2) they have the option of no shadowDOM but with (proprietary) <slots> - I still like this for form elements

but without a render method. I do this so I get the benefit of being able to update via props (not just attrs), plus the whole build pipeline - so these components still get fully typed. End result is devs use it in Vue or React and get full type-safety

Untitled ...

I put together a little demo of what I meant codepen.io/john_jenkins... ofc you could get this via classes. But tying things to attributes just feels more descriptive and intuitive to me.
In real-life, I use Stencil under-the-hood to actually publish this as a custom-element

Yes - exactly like that. 1) uniformity 2) you have the option to progressively enhance / sprinkle js in later if you like. Nothing public I can share but this explains the reasoning pretty well forge.tylerdev.io/main/?path=/...

I take a hybrid approach. From full WCs (when JS is needed)... all the way to 'Just a custom tag as a CSS hook' (e.g. my-button > a { // styles } ) and everything in between.

Transforms A docs page for Eleventy, a simpler static site generator.

Hi! I would think that’d be fine - using an 11ty transform (www.11ty.dev/docs/transfo...) and the renderToString exported from the hydrate script output (stenciljs.com/docs/hydrate...)

Hey! Not sure I understand the issue with Stencil events? (I’ll properly take look when I’m at a comp)…but stencil handles any event afaik with the camelCase convention … onWhatever will attach an event listener without prejudice afaik