The platform contract

Declarative Shadow DOM uses a template with shadowrootmode so HTML can carry shadow-root content before client JavaScript loads.

<my-card>
  <template shadowrootmode="open">
    <style>
    :host {
      display: block;
    }
    </style>
    <p>Visible before client JavaScript.</p>
  </template>
</my-card>

Traditional hydration

A client runtime often reconstructs the component tree before the page is fully interactive.

DSD-first rendering

The browser parses shadow roots from HTML. Custom Elements then upgrade existing hosts and attach only the needed behavior.

openElement layers

• Static DSD components for content, layout, and documentation.
• Interactive elements for local browser behavior.
• Islands for client components that need framework runtimes.