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.