Declarative Shadow DOM 是 openElement 的核心渲染模型：服务端输出标准 HTML，浏览器在解析阶段创建 shadow root，JavaScript 只负责后续升级和必要事件绑定。v0.20 起，DSD 组件默认以 DsdElement + StyleSheet 实现。
DSD 是 WHATWG HTML 中的 template 语义，核心属性是 shadowrootmode。它允许 HTML 直接携带 shadow root 内容，使服务端渲染的 Web Components 在 JS 加载前已经可见。
<my-card>
<template shadowrootmode="open">
<style>:host { display: block; }</style>
<p>内容在 JavaScript 加载前可见。</p>
</template>
</my-card>| 属性 | openElement 选项 | 用途 |
|---|---|---|
shadowrootmode | 固定输出 open | 启用声明式 shadow root。 |
shadowrootdelegatesfocus | delegatesFocus | 焦点委托。 |
shadowrootslotassignment | slotAssignment | slot 分配策略。 |
shadowrootclonable | clonable | 允许 clone 时保留 shadow root。 |
shadowrootserializable | serializable | 允许序列化 shadow root。 |
shadowrootcustomelementregistry | customElementRegistry | 为 scoped registry 方向预留语义。 |
| 层级 | 类型 | 客户端 JS | 适合场景 |
|---|---|---|---|
| Layer 1 | dsd-static | 无 | 布局、导航、文章内容。 |
| Layer 2 | dsd-interactive | 只绑定事件 | 主题切换、折叠、tabs。 |
| Layer 3 | pure-island | 完整客户端逻辑 | 图表、复杂表单、WebSocket。 |
DSD 不是"任意组件 SSR"的保证。组件如果依赖浏览器布局、全局 DOM、副作用、timer 或第三方脚本， 就必须降级为 pure island，或通过 manifest 明确声明 SSR/fallback 行为。
openElement 应通过 Playwright 验证目标浏览器行为。旧浏览器 polyfill 只能作为降级路径，不能替代真实浏览器验证。
DsdElement + Signals 让 Ocean 组件获得零框架响应式。 一个 signal(0) 驱动计数器，一个 computed() 驱动过滤器—— 不需要 Lit、React 或任何框架运行时。
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.