Document: adoptedStyleSheets プロパティ

値

値は CSSStyleSheet インスタンスの配列です。これらは同じ CSSStyleSheet() のコンテキスト内で Document コンストラクターを使用して作成されている必要があります。

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

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

例外

NotAllowedError DOMException

配列内の CSSStyleSheet インスタンスのいずれかが CSSStyleSheet() コンストラクターを使用して作成されていないか、フレーム内など現在の文書とは異なる文書で作成されています。

例

スタイルシートの採用

下記コードはスタイルシートが作成され、CSSStyleSheet.replaceSync() が呼び出されてルールが追加される様子を示しています。 このスタイルシートは配列に追加され、adoptedStyleSheets プロパティに割り当てられています。

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

// 文書へスタイルシートを適用
document.adoptedStyleSheets = [sheet];

CSSStyleSheet.insertRule() を用いて新しいルールをスタイルシートに追加することができます。

sheet.insertRule("* { background-color: blue; }");
// 文書は青い背景になる。

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

adoptedStyleSheets プロパティに全く新しいスタイルシートを追加するには、新しい結合配列を作成して割り当てる必要があります。 下記はスプレッド構文を使用しています。

const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");

// 既存のシートと新しいシートの結合
document.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet];

シャドウ DOM とのスタイルシートの共有

このスタイルシートは、同様の方法でシャドウルートと共有することができます。

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

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

仕様書

ブラウザーの互換性

関連情報

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