Dokument: `adoptedStyleSheets`-Eigenschaft
Baseline 2023Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die adoptedStyleSheets-Eigenschaft des Document-Interfaces wird verwendet, um ein Array von konstruierten Stylesheets, die vom Dokument verwendet werden, festzulegen.
Hinweis:
Ein konstruiertes Stylesheet ist ein Stylesheet, das programmatisch mithilfe des CSSStyleSheet()-Konstruktors erstellt wurde (im Vergleich zu einem, das von einem User-Agent erstellt wird, wenn ein Stylesheet aus einem Skript importiert, mit <style> und @import importiert oder über <link> verlinkt wird).
Die gleichen konstruierten Stylesheets können auch mit einer oder mehreren ShadowRoot-Instanzen über die ShadowRoot.adoptedStyleSheets-Eigenschaft geteilt werden.
Eine Änderung eines adoptierten Stylesheets wirkt sich auf alle Objekte aus, die es adoptieren.
Stylesheets in der Eigenschaft werden zusammen mit den anderen Stylesheets des Dokuments unter Verwendung des CSS-Kaskaden-Algorithmus ausgewertet.
Wo die Auflösung von Regeln die Reihenfolge der Stylesheets berücksichtigt, wird angenommen, dass adoptedStyleSheets nach denjenigen in Document.styleSheets geordnet sind.
Nur Stylesheets, die mithilfe des CSSStyleSheet()-Konstruktors im Kontext des aktuellen Document erstellt wurden, dürfen adoptiert werden.
Wert
Der Wert ist ein Array von CSSStyleSheet-Instanzen, die mit dem CSSStyleSheet()-Konstruktor im Kontext desselben Document erstellt worden sein müssen.
Wenn das Array geändert werden muss, verwenden Sie in-place Mutationen wie push(). Die CSSStyleSheet-Instanzen selbst können ebenfalls verändert werden und diese Änderungen gelten, wo immer das Stylesheet adoptiert wird.
In einer früheren Version der Spezifikation war das Array nicht modifizierbar, sodass der einzige Weg, neue Stylesheets hinzuzufügen, darin bestand, ein neues Array adoptedStyleSheets zuzuweisen.
Ausnahmen
NotAllowedErrorDOMException-
Eine der
CSSStyleSheet-Instanzen im Array wurde nicht mithilfe desCSSStyleSheet()-Konstruktors erstellt oder wurde in einem anderen Dokument als dem aktuellen Dokument erstellt, etwa in einem Frame.
Beispiele
Adoptiere ein Stylesheet
Der folgende Code zeigt ein Stylesheet, das konstruiert wird, und dann wird CSSStyleSheet.replaceSync() aufgerufen, um dem Sheet eine Regel hinzuzufügen.
Das Stylesheet wird dann zu einem Array hinzugefügt und der adoptedStyleSheets-Eigenschaft zugewiesen.
// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");
// Apply the stylesheet to a document
document.adoptedStyleSheets.push(sheet);
Wir können eine neue Regel zum Stylesheet mit CSSStyleSheet.insertRule() hinzufügen.
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
Teilen eines Stylesheets mit einem Shadow-DOM
Wir können ein Stylesheet auf ähnliche Weise mit einem Shadow Root teilen.
// Create an element in the document and then create a shadow root:
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
// Adopt the same sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |