Declarative Shadow DOM is the core openElement rendering model: the server emits standard HTML, the browser creates shadow roots during parsing, and JavaScript only upgrades components and binds necessary events. Since v0.20, DSD components are built on DsdElement + StyleSheet by default.
DSD is template semantics in WHATWG HTML. The key attribute isshadowrootmode. It lets HTML carry shadow root content so server-rendered Web Components are visible before their JavaScript implementation loads.
<my-card>
<template shadowrootmode="open">
<style>:host { display: block; }</style>
<p>Content is visible before JavaScript loads.</p>
</template>
</my-card>| Attribute | openElement Option | Purpose |
|---|---|---|
shadowrootmode | always open | Enables declarative shadow root output. |
shadowrootdelegatesfocus | delegatesFocus | Delegates focus into the shadow root. |
shadowrootslotassignment | slotAssignment | Controls slot assignment. |
shadowrootclonable | clonable | Allows cloned hosts to include the shadow root. |
shadowrootserializable | serializable | Allows shadow root serialization. |
shadowrootcustomelementregistry | customElementRegistry | Leaves room for scoped registry semantics. |
| Layer | Type | Client JS | Good Fit |
|---|---|---|---|
| Layer 1 | dsd-static | None | Layout, navigation, article content. |
| Layer 2 | dsd-interactive | Events only | Theme toggles, disclosure, tabs. |
| Layer 3 | pure-island | Full client logic | Charts, complex forms, WebSocket. |
DSD is not a guarantee that every component can be SSR-rendered. Components that depend on browser layout, global DOM, side effects, timers, or third-party scripts must degrade to pure islands or declare their SSR/fallback behavior in a manifest.
openElement should validate target browser behavior with Playwright. Polyfills for older browsers are graceful fallback, not a replacement for real-browser validation.
DsdElement + Signals gives Ocean components zero-framework reactivity. A single signal(0) drives a counter, a computed() drives a filter — no Lit, React, or any framework runtime required.
A single signal(0) drives this counter. No Lit, no React, no framework.
One signal(false) controls the entire component theme. Reactive attribute binding via data-signal-attr.
Current theme: light
computed)A computed() signal filters a list in real-time. Zero DOM diffing overhead.