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.

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

メモ: 構築されたスタイルシートは、CSSStyleSheet() コンストラクターを使用してプログラムで作成されたスタイルシートです(ユーザーエージェントがスクリプトからスタイルシートをインポートする際に作成するスタイルシート、<style>@import を使用してインポートするスタイルシート、または <link> を使用してリンクするスタイルシートと比較すると)。

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

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

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

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

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

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

スタイルシートの適用

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

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

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

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

// シートをシャドウ DOM に適用
shadow.adoptedStyleSheets = [sheet];

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

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

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

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

js
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

関連情報