CSS 作用域

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

CSS 样式要么是全局作用域，要么作用域到阴影树。全局作用域样式应用于节点树中与选择器匹配的所有元素，包括该树中的自定义元素，但不应用于构成每个自定义元素的阴影树。选择器及其关联的样式定义不会跨作用域泄漏。

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

有时能够从阴影树上下文内设置宿主样式非常有用。CSS 作用域模块通过定义以下选择器使这成为可能：

  • 使阴影树能够设置其宿主的样式。
  • 使外部 CSS 能够设置阴影 DOM 内元素的样式（但前提是关联的自定义元素已设置为接受外部样式）。

参考

选择器

指南

Web 组件

介绍创建可重用 Web 组件的不同技术——自定义元素，其功能与代码的其余部分隔离。

使用 Shadow DOM

Shadow DOM 基础，包括将 Shadow DOM 附加到元素、添加到 Shadow DOM 树以及设置样式。

使用模板和插槽

使用<template>和<slot>元素定义可重用 HTML 结构，并在 Web 组件内使用该结构。

使用自定义元素

介绍 Custom Elements API，用于创建封装功能的自定义元素的 JavaScript API。

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

规范

规范
CSS 范围模块 1 级

另请参见