Headless Storybook with Lit

Storybook offers key advantages for component development, especially when building a design system. It addresses common challenges out of the box and streamlines your workflow. However, the abstraction that Storybook offers can obscure critical insights into component behaviour in real-world deployment scenarios, particularly with server-side rendering (SSR). Server-side rendering is the process of generating HTML markup on the server before transmitting it to the client. This approach reduces the client-side computational load on the browser during page rendering, thereby enhancing performance, search engine optimisation (SEO), and related metrics. However, server-side rendering introduces added complexity, particularly when integrating with Web Components, making setup and ongoing maintenance more challenging. Let's take Lit, a Web Component framework that my team uses as an example. An experimental server-side rendering feature exists that relies on the declarative shadow DOM, but