声明式影子 DOM
使用 shadowrootmode 无需 JavaScript 即可从 HTML 附加影子 DOM
声明式影子 DOM 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
它解决的问题
传统影子 DOM 通过 JavaScript（attachShadow）创建。对于服务器渲染的页面，这意味着影子树必须等到 JS 运行后才会有内容——这违背了 SSR 在首字节就提供完整 HTML 的目的。声明式影子 DOM 解决了这一问题。
shadowrootmode 属性
带有 shadowrootmode="open" 的 <template> 会在解析时于 HTML 中声明一个影子根。浏览器会自动将影子根附加到父元素上；模板的内容会成为影子树。无需 JavaScript。
<my-card>
<template shadowrootmode="open">
<style>:host { display: block; padding: 16px; }</style>
<slot></slot>
</template>
<p>This goes into the slot</p>
</my-card>SSR 与网页组件
声明式影子 DOM 支持真正的服务器渲染网页组件：服务器直接输出完整的内联影子树，浏览器会在执行任何 JS 之前解析并附加它，而水合 JS 可以从完全渲染的基线接管。它在能力上与框架 SSR 不相上下。
模式：open 或 closed
模式与命令式 attachShadow 相同：shadowrootmode="open" 会通过 element.shadowRoot 暴露影子树；shadowrootmode="closed" 则会将其隐藏。其行为与通过 JavaScript 附加的对应形式完全相同。
每个元素只解析一次
浏览器第一次看到 <template shadowrootmode> 时会附加影子根。附加后，模板就会被消耗掉——之后再查询它将不会返回任何内容。这与 attachShadow 的生命周期一致：影子根会在元素的整个生命周期内存在。
插槽照常工作
浅层子元素（示例中位于 <template> 外部的 <p>）会投影到影子树内部的 <slot> 元素中，就像命令式影子 DOM 一样。组合方式完全相同；不同之处只有附加机制。
与自定义元素结合
如果 <my-card> 是已注册的自定义元素，升级过程会使用已经附加的影子根，而不是再次调用 attachShadow。自定义元素类可以在其 connectedCallback 中读取 this.shadowRoot，无需创建影子根。
服务器工具支持
Lit-html 的 render、Astro 组件以及其他几个框架现在都会将声明式影子 DOM 作为其 SSR 输出的一部分。自行实现也是可行的：任何字符串模板系统都可以写出 shadowrootmode 模板。
浏览器支持
Chrome、Edge、Safari 和 Firefox 都已支持声明式影子 DOM。较旧的浏览器会静默忽略 <template> 元素——模板内部的内容不可见，对于不支持该功能的环境来说，这是一种平稳降级。
填充策略
如果需要更广泛的支持，可以使用一个小型脚本遍历 DOM，并将 template[shadowrootmode] 转换为实际的影子根。请在注册任何自定义元素之前运行它，以确保后续组件升级时能够看到预期的影子树。
权衡
声明式影子 DOM 会重复结构：即使组件类中也已经包含了 <template> 的内容，该内容仍然会保留在 HTML 中。对于包含大量相同组件的页面，这会增加负载大小。框架会进行去重；手工实现的 SSR 也可能需要这样做。
何时采用
如果您发布网页组件，并且关注首字节渲染或搜索引擎优化，现在就可以采用。该功能稳定、受到支持，并且能显著改善基于网页组件的应用的 SSR 体验。对于不使用影子 DOM 的应用，它并不适用。
知识检查
与命令式 attachShadow 相比，声明式影子 DOM 解决了什么问题？
总结
声明式影子 DOM 在自定义元素内部使用 <template shadowrootmode="open">，在解析时附加影子根，无需 JS。它为网页组件启用真正的 SSR：影子树、作用域样式和插槽都能在水合前正常工作。所有现代浏览器都支持它；较旧浏览器也有可用的填充程序。框架（Lit、Astro）会自动输出它。
常见问题解答
「声明式影子 DOM」课时是免费的吗？
是的 — 「声明式影子 DOM」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「声明式影子 DOM」这节课中我会学到什么？
使用 shadowrootmode 无需 JavaScript 即可从 HTML 附加影子 DOM 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「声明式影子 DOM」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。