Example 13: SSR + Declarative Shadow DOM

What This Shows

This example demonstrates a practical combo: SSR output for immediate content + Declarative Shadow DOM for style encapsulation without waiting for client rendering.

The cards below are rendered in HTML with <template shadowrootmode="open">, then upgraded with minimal JS.

Checking support…

SSR Snapshot (Server Output)

Typical HTML the server can stream immediately:

<product-preview>
  <template shadowrootmode="open">
    <style>/* isolated card styles */</style>
    <article class="card">
      <slot name="name"></slot>
      <slot name="meta"></slot>
      <button id="quickAdd">Quick add</button>
    </article>
  </template>
  <h3 slot="name">Keyboard KX-87</h3>
  <p slot="meta">$129 · Stock: 24</p>
</product-preview>

Live DSD Cards (No client templating)

Buttons are wired after load to prove progressive enhancement / hydration style behavior.

[ready] waiting for actions…

Notes

• SSR gives first paint quickly with real content (better UX / SEO baseline).
• Declarative Shadow DOM keeps styles scoped without client-side template cloning.
• JS enhancement can attach behavior after paint (events, analytics, hydration).

Documentation

• MDN: <template> element
• MDN: Using Shadow DOM
• Can I Use: Declarative Shadow DOM

Next Step

• Example 14: Worker User Pool