CSS 作用域

CSS 作用域模块定义了 CSS 作用域和封装机制，重点关注 Shadow DOM 作用域机制。

CSS 样式要么是全局作用域，要么是作用域限定为影子树。全局作用域样式适用于节点树中与选择器匹配的所有元素，包括该树中的自定义元素，但不适用于构成每个自定义元素的影子树。选择器及其相关的样式定义不会在作用域之间泄露。

在影子树的 CSS 中，选择器不会选择树之外的元素，无论是全局作用域还是其他影子树。每个自定义元素都有自己的影子树，其中包含构成自定义元素的所有组件（但不包括自定义元素本身或“宿主”）。

有时能够从影子树内部的上下文对宿主进行样式设置会很有用。CSS 作用域模块通过定义以下选择器实现了这一点：

使影子树能够对其宿主进行样式设置。
使外部 CSS 能够对 Shadow DOM 中的元素进行样式设置（但仅当相关自定义元素设置为接受外部样式时）。

参考

选择器

指南

Web 组件: Web 组件的介绍 — 各种用于创建可复用 Web 组件的技术 — 这些自定义元素的功能与代码的其余部分是封装的。
使用 Shadow DOM: Shadow DOM 基础知识，包括将 Shadow DOM 附加到元素、添加到 Shadow DOM 树以及样式设置。
使用模板和插槽: 使用 <template> 和 <slot> 元素定义可复用 HTML 结构，并在 Web 组件内部使用该结构。
使用自定义元素: Custom Elements API 介绍，用于创建封装功能的自定义元素的 JavaScript API。

相关概念

CSS :defined 伪类
CSS ::part 伪元素
HTML <template> 元素
HTML <slot> 元素
HTML slot 属性
影子树词汇表术语
DOM 词汇表术语
复合选择器术语
选择器列表术语
Web 组件接口、属性和方法
- CustomElementRegistry 接口
- Element API
  - Element.slot 属性
  - Element.assignedSlot 属性
  - Element.attachShadow() 方法
- HTMLSlotElement 接口
- HTMLTemplateElement 接口
- ShadowRoot 接口

注意：尽管名称相似，但 :scope 伪类（表示作为选择器匹配参考点（或作用域）的元素）是在选择器模块中定义的。它与 CSS 作用域模块无关，后者专注于与 Shadow DOM 作用域机制相关的作用域。

规范

规范
CSS 作用域模块级别 1

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容问题