This is close to exactly what I’ve been wanting: a way to use web components like <product-card heading="Product Name" price="$30.00"></product-card>and have that card render as regular ol’ HTML.
a new plugin for Eleventy that renders your Lit components as static HTML during your Eleventy build, and lets you hydrate them after your JavaScript loads.
Server-side rendering web components is so important for progressive enhancement, accessibility, performance, and overall experience. But (from my naive perspective) because web components were react-ing to React (har har) and company when they were being created, the “what if JS isn’t available” case wasn’t as much a priority.
Of course over the last few years the React and JS ecosystem has put more of a priority on server-side rendering, which gives developers the experience they want without sacrificing the user experience. So it’s very good to see web components following suit.
Declarative Shadow DOM always looked gross to me and I felt it almost defeats the purpose of web components. BUT! With tools like this (especially this @lit-labs/ssr project), we can have our cake and eat it too: use web components in a dev-friendly way, and then have the machines do the heavy lifting to convert that into a grosser-yet-progressive-enhancement-enabled syntax that ships to the user.
Now if only I could get something like this working in my WordPress theme…🤔