HTML Academy · 课时

影子 DOM 内的作用域样式

编写只影响影子树内元素的 CSS

影子 DOM 内的作用域样式 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

默认的 CSS 封装

影子根节点内的每条 <style> 规则都只会应用于该根节点内部。影子树中的 p { color: red } 只会将该影子树中的段落设为红色——主文档中的段落不受影响，主文档的样式也无法进入影子树。

封装为何重要

封装消除了困扰大型应用数十年的全局 CSS 问题。组件的样式不会被网站 CSS 意外覆盖，组件也不会意外破坏网站。这个边界由规范定义，而不是依靠约定。

:host 伪类

在影子树内部，可以使用 :host 为宿主元素设置样式。使用 :host(selector) 可以根据选择器限定范围：:host([open]) { display: block; } 只有在宿主存在 open 属性时才会匹配宿主。

继承属性仍会跨越边界

继承的 CSS 属性（color、font-family、line-height）仍会通过继承跨越影子边界。文档设置的 body { color: blue } 也会将影子文本变为蓝色，除非影子树显式覆盖该属性。这是一项实用特性：排版默认值可以保持一致。

CSS 自定义属性可以穿透边界

自定义属性（CSS 变量）会继承穿过影子根节点，因此它们是公开组件主题设置接口的标准方式：在影子树内部声明 --card-bg: var(--surface, white)，并允许使用者在宿主上覆盖 --surface。

/* Shadow */
:host {
  background: var(--card-bg, white);
}
/* Page */
my-card {
  --card-bg: #f3f4f6;
}

使用 ::part 进行外部样式设置

使用 part="name" 标记影子内部元素后，使用者就可以通过 my-card::part(name) { ... } 为其设置样式。请使用 parts 提供单独的样式入口，同时保持影子树的大部分内容处于封装状态。

采用的样式表

shadowRoot.adoptedStyleSheets = [sheet] 可以在多个影子根节点之间共享一个 CSSStyleSheet，避免重复解析 <style>。请使用 new CSSStyleSheet() 构造样式表，并使用 sheet.replaceSync(cssText)。这在设计系统中能带来显著的性能提升。

声明顺序

请将 <style> 标签放在影子 innerHTML 的最顶部，以便在构建其余 DOM 之前解析样式。这样可以避免样式在解析顺序中延迟到达而造成的短暂无样式内容闪烁。

:host-context 用于基于祖先元素的规则

:host-context(.dark-mode) :host 会根据影子树外部的祖先选择器为宿主设置样式。根据高层级包装器上的类为组件设置主题时，这一功能很有用。浏览器支持情况良好，但请在目标浏览器矩阵中进行确认。

全局重置应保留在外部

文档范围的 CSS 重置（例如 body 的外边距和 box-sizing）不会影响影子树。请在每个影子根节点内重新应用所需的重置，或通过构造的样式表共享重置，并将其采用到每个组件中。

调试影子样式

Chrome DevTools 会在元素面板中以“#shadow-root (open)”的形式显示影子根节点。您可以像检查其他 CSS 一样检查、编辑和切换影子样式，包括 :host 伪类和 ::part 规则。

知识检查

为什么 CSS 自定义属性（变量）是为影子 DOM 组件设置主题的首选方式？

总结

影子 DOM 会在两个方向上封装样式。请使用 :host 设置宿主样式，通过继承的 CSS 自定义属性公开主题设置入口，通过 ::part 公开可供设置样式的单个元素，使用 adoptedStyleSheets 共享样式表，并在每个影子根节点内重新应用重置，因为文档范围的 CSS 无法跨越边界。

常见问题解答

「影子 DOM 内的作用域样式」课时是免费的吗？

是的 — 「影子 DOM 内的作用域样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「影子 DOM 内的作用域样式」这节课中我会学到什么？

编写只影响影子树内元素的 CSS 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「影子 DOM 内的作用域样式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy