Declarative Shadow DOM Sample

This page uses Shadow DOM for styling. If you open this page with a browser that does not support Declarative Shadow DOM, you should observe a Flash Of Unstyled Content.

What is Declarative Shadow DOM?

A markup-based way of attaching a shadow DOM to an element. It allows us to serialize elements with shadow DOM into an HTML string, which enables server-side rendering of contents made up of Shadow DOM.

Read more at Declarative Shadow DOM - web.dev

How is this page made?

Castella, a CSS-in-JS library with Declarative Shadow DOM support, is used. This page is server-side-rendered with Next.js.

GitHub: uhyo/declarative-shadow-dom-sample