Small Example of Declarative Shadow DOM

I thought the Bytes newsletter #326 did a good job of showing the different between a “normal” web component and a “declarative shadow DOM” web component. (Quick ports of the former and latter). Declarative shadow DOM is the web components story for “server-side rendering” (SSR). All the visual stuff needed to render the component is in the HTML, then JavaScript loads later and wires it all up. Literally the same as hydration. I’ve heard “where is the Next.js of web components?” and I tend to think declarative shadow DOM is one of the major primitives required to get there.