Here’s a new development in the Web Components story, and one that may have positive implications for resilience, performance and progressive enhancement.
But some people including Chris Coyier and Brad Frost) reckon that writing that looks horrible. Brad said:
Declarative Shadow DOM always looked gross to me and I felt it almost defeats the purpose of web components.
And Chris added:
the server-side rendering story for Web Components, Declarative Shadow DOM, doesn’t feel very nice to me if you have to do it manually.
However Lit, a library which makes working with Web Components easier, are now providing ways to make this easier when Lit is used with Eleventy.
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.
As an additional footnote, perhaps we can make frameworks other than Eleventy (such as Rails) create server-rendered custom elements with Declarative Shadow DOM in a similar way. One to explore.