ShadowRoot: adoptedStyleSheets 屬性
ShadowRoot 介面的 adoptedStyleSheets 屬性用於設定一組用於 shadow DOM 子樹的構造樣式表。
注意： 構造樣式表是透過使用 CSSStyleSheet() 建構函式 以程式設計方式建立的樣式表（與使用者代理在指令碼中匯入樣式表、使用 <style> 和 @import 匯入、或透過 <link> 連結的樣式表相比）。
同一個構造樣式表可以被多個 ShadowRoot 例項以及父文件（使用 Document.adoptedStyleSheets 屬性）採納。更改採納的樣式表將影響所有采納物件。
adoptedStyleSheets 屬性中的樣式表會與 shadow DOM 的其他樣式表一起被考慮。為了確定任何元素的最終計算 CSS，它們被認為是在 shadow DOM 中的其他樣式表（ShadowRoot.styleSheets）之後 新增的。
只有使用 CSSStyleSheet() 建構函式 建立的，並且在 shadow root 的父 Document 範圍內建立的樣式表才能被採納。
值
該值是一個 CSSStyleSheet 例項的陣列，這些例項必須是在 shadow root 的父 Document 上下文中，使用 CSSStyleSheet() 建構函式建立的。
如果需要修改陣列，請使用原地修改方法，如 push()。CSSStyleSheet
在規範的早期版本中，陣列是不可修改的，因此新增新樣式表的唯一方法是將一個新陣列賦值給 adoptedStyleSheets。
示例
採納樣式表
下面的程式碼首先展示了一個構造的樣式表，然後呼叫 CSSStyleSheet.replaceSync() 來向該樣式表新增一條規則。
// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");
然後我們建立一個 ShadowRoot，並將樣式表物件作為陣列傳遞給 adoptedStyleSheets。
// 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() 向同一個樣式表新增一條新規則。
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
新增一個新樣式表
可以透過使用 adoptedStyleSheets.push() 將新樣式表追加到文件或 shadow root。
const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");
// Concat the new sheet.
shadow.adoptedStyleSheets.push(extraSheet);
規範
| 規範 |
|---|
| CSS 物件模型 (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |
瀏覽器相容性
載入中…