Document: 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
は Document
インターフェイスのプロパティで、この文書で使用する構築されたスタイルシートの配列を設定するために使用します。
メモ:
構築されたスタイルシートとは、CSSStyleSheet()
コンストラクターを用いてプログラムで作成されたスタイルシートのことです(ユーザーエージェントがスクリプトからスタイルシートをインポートしたり、<style>
や @import
を使用してインポートしたり、<link>
でリンクしたりする場合に作成されるスタイルシートとは異なります)。
このスタイルシートは、ShadowRoot.adoptedStyleSheets
プロパティを使用して、1 つ以上の ShadowRoot
インスタンスと共有することもできます。
このスタイルシートを変更すると、それを採用しているすべてのオブジェクトに影響します。
プロパティ内のスタイルシートは、CSS カスケードアルゴリズムを使用して、文書の他のスタイルシートと共に評価されます。
ルールの解決がスタイルシートの順序を考慮する場合、adoptedStyleSheets
は Document.styleSheets
内のスタイルシートの後に並べられると想定されます。
現在の Document
のコンテキスト内で CSSStyleSheet()
コンストラクターを使用して作成されたスタイルシートのみが採用されます。
値
値は 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];
仕様書
Specification |
---|
CSS Object Model (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |
ブラウザーの互換性
BCD tables only load in the browser