Declarative Shadow DOM

A <template shadowrootmode="open"> tells the HTML parser to attach a shadow root to its parent element. With JSX on the server, you get web components with encapsulated styles and slots in the very first response: no framework, no hydration, and it works with JavaScript turned off.

Style isolation

This page sets h3 to a dashed, crossed-out style. The headings inside the cards are in a shadow root, so they keep their own styles, and the card styles don't leak out.

An h3 in the light DOM

No moons at all.1 moon.95 moons.

Slots

The text below the planet name comes from the light DOM through a named <slot>. Content without a slot name goes into the default slot, as in this callout:

Good to knowLight DOM content stays in the document, so search engines and the browser's find in page still see it.

Progressive enhancement

A small script defines <planet-card>. Its constructor finds the shadow root the parser already attached (this.shadowRoot) and only adds behaviour: a click on a card counts visits. Nothing is rendered twice. Turn off JavaScript and the cards still look the same.