ShadowRoot: adoptedStyleSheets プロパティ
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
adoptedStyleSheets
は ShadowRoot
インターフェイスのプロパティで、構築されたスタイルシートの配列を設定し、シャドウ DOM サブツリーで使用します。
メモ:
構築されたスタイルシートは、CSSStyleSheet()
コンストラクターを使用してプログラムで作成されたスタイルシートです(ユーザーエージェントがスクリプトからスタイルシートをインポートする際に作成するスタイルシート、<style>
と @import
を使用してインポートするスタイルシート、または <link>
を使用してリンクするスタイルシートと比較すると)。
このスタイルシートは、複数の 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);
仕様書
Specification |
---|
CSS Object Model (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |
ブラウザーの互換性
BCD tables only load in the browser