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() が呼び出されて、シートにルールが追加されます。

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

関連情報