adoptedStyleSheets はShadowRoot インターフェイスのプロパティで、構築されたスタイルシートの配列を設定し、シャドウ DOM サブツリーで使用します。

このスタイルシートは、複数のShadowRoot インスタンスや、親文書にも（Document.adoptedStyleSheets プロパティを使用して）適用することができます。適用されたスタイルシートを変更すると、適用されたすべてのオブジェクトに影響します。

adoptedStyleSheets プロパティ内のスタイルシートは、シャドウ DOM の他のスタイルシートとともに考慮されます。そのため、最終的な計算結果の CSS を決定する目的では、シャドウ DOM 内の他のスタイルシート (ShadowRoot.styleSheets) の後に追加されたものとみなされます。

CSSStyleSheet() コンストラクターを使用して作成し、シャドウルートと同じ親文書 (Document) 内のもののみ、このスタイルシートを適用することができます。

値

値はCSSStyleSheet インスタンスの配列であり、シャドウルートの親文書 (Document) のコンテキスト内でCSSStyleSheet() コンストラクターを使用して作成されたものでなければなりません。

配列を変更する必要がある場合は、その場で変更するpush() のような方法を使用します。CSSStyleSheet インスタンス自体も変更することができ、この変更は、このスタイルシートが採用されている場所すべてに適用されます。

仕様書の以前のバージョンでは、配列は変更することができなかったため、新しいスタイルシートを追加する唯一の方法は、adoptedStyleSheets に新しい配列を割り当てることでした。

例

スタイルシートの適用

下記のコードでは、最初のスタイルシートが構築され、その後、CSSStyleSheet.replaceSync() が呼び出されて、シートにルールが追加されます。

// 空の「構築された」スタイルシートを作成const sheet = new CSSStyleSheet();// シートにルールを適用sheet.replaceSync("a { color: red; }");

次にShadowRoot を作成し、シートオブジェクトを配列内のadoptedStyleSheets に渡します。

// 文書内の要素を作成し、次にシャドウルートを作成const node = document.createElement("div");const shadow = node.attachShadow({ mode: "open" });// シートをシャドウ DOM に適用shadow.adoptedStyleSheets = [sheet];

このスタイルシートは、配列に追加した後でも変更することができます。次の例では、CSSStyleSheet.insertRule() を使用して、同じスタイルシートに新しいルールを追加しています。

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

新しいスタイルシートの追加

adoptedStyleSheets.push() を使用することで、新しいスタイルシートを文書またはシャドウルートに追加することができます。

const extraSheet = new CSSStyleSheet();extraSheet.replaceSync("p { color: green; }");// 新しいシートに結合するshadow.adoptedStyleSheets.push(extraSheet);

仕様書

ブラウザーの互換性

関連情報

• Constructable Stylesheets (web.dev)
• シャドウ DOM の使用
• CSSStyleSheet() コンストラクター
• CSSStyleSheet.replaceSync()
• CSSStyleSheet.replace()
• CSSStyleSheet.insertRule()
• CSSStyleSheet.deleteRule()