ShadowRoot：adoptedStyleSheets 属性

基线 2023

新可用

自 2023 年 3 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能无法在较旧的设备或浏览器中使用。

adoptedStyleSheets 是 ShadowRoot 接口的属性，用于设置一组构造的样式表，这些样式表将被 Shadow DOM 子树使用。

注意：构造的样式表是指使用 CSSStyleSheet() 构造函数（与通过用户代理（在从脚本导入样式表时）创建的样式表、使用 <style> 和 @import 导入的样式表、或通过 <link> 链接的样式表相比）在编程方式创建的样式表。

同一个构造的样式表可以被多个 ShadowRoot 实例以及父文档（使用 Document.adoptedStyleSheets 属性）采用。更改已采用的样式表将影响所有采用它的对象。

adoptedStyleSheets 属性中的样式表将与 Shadow DOM 的其他样式表一起考虑。为了确定任何元素的最终计算 CSS，它们被认为是在 Shadow DOM 中的其他样式表 (ShadowRoot.styleSheets) 之后添加的。

只有使用 CSSStyleSheet() 构造函数 在与 Shadow Root 的父 Document 相同的父 Document 中创建的样式表才能被采用。

值

该值是一个 CSSStyleSheet 实例数组，这些实例必须使用 CSSStyleSheet() 构造函数在 Shadow Root 的父 Document 的上下文中创建。

如果需要修改数组，请使用就地变异，例如 push()。CSSStyleSheet 实例本身也可以被修改，这些更改将应用于采用该样式表的所有位置。

在规范的早期版本中，数组是不可修改的，因此添加新样式表的唯一方法是将新数组分配给 adoptedStyleSheets。

示例

采用样式表

下面的代码首先展示了构造样式表，然后调用 CSSStyleSheet.replaceSync() 向该表添加规则。

js
// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");

然后，我们创建一个 ShadowRoot，并将该表对象作为数组传递给 adoptedStyleSheets。

js
// Create an element in the document and then create a shadow root:
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });

// Adopt the sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];

我们仍然可以在将样式表添加到数组后修改它们。在下面，我们使用 CSSStyleSheet.insertRule() 向同一个表追加一条新规则。

js
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.

追加新的样式表

可以使用 adoptedStyleSheets.push() 将新的样式表追加到文档或 Shadow Root。

js
const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");

// Concat the new sheet.
shadow.adoptedStyleSheets.push(extraSheet);

规范

规范
CSS 对象模型 (CSSOM)
# dom-documentorshadowroot-adoptedstylesheets

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅