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-Interface wird verwendet, um ein Array von konstruierten Stylesheets festzulegen, die vom Dokument verwendet werden sollen.
Hinweis:
Ein konstruiertes Stylesheet wird programmgesteuert mit dem CSSStyleSheet()-Konstruktor erstellt (im Gegensatz zu einem, das von einem User-Agent erstellt wird, wenn ein Stylesheet aus einem Skript importiert wird, das mit <style> und @import importiert oder über <link> verlinkt wurde).
Die gleichen konstruierten Stylesheets können auch mit einer oder mehreren ShadowRoot-Instanzen geteilt werden, indem die ShadowRoot.adoptedStyleSheets-Eigenschaft verwendet wird. Eine Änderung an einem übernommenen Stylesheet wirkt sich auf alle Objekte aus, die es übernommen haben.
Stylesheets in der Eigenschaft werden zusammen mit den anderen Stylesheets des Dokuments unter Verwendung des CSS-Cascade-Algorithmus ausgewertet. Bei der Regelauflösung wird die Reihenfolge der Stylesheets berücksichtigt, wobei adoptedStyleSheets als nach denen in Document.styleSheets angeordnet angenommen werden.
Nur Stylesheets, die unter Verwendung des CSSStyleSheet()-Konstruktors im Kontext des aktuellen Document erstellt wurden, dürfen übernommen werden.
Wert
Der Wert ist ein Array von CSSStyleSheet-Instanzen, die unter Verwendung des CSSStyleSheet()-Konstruktors 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 modifiziert werden, und diese Änderungen werden überall angewendet, wo das Stylesheet übernommen wird.
In einer früheren Version der Spezifikation war das Array nicht modifizierbar, so dass der einzige Weg, neue Stylesheets hinzuzufügen, darin bestand, ein neues Array der adoptedStyleSheets-Eigenschaft zuzuweisen.
Ausnahmen
NotAllowedErrorDOMException-
Eine der
CSSStyleSheet-Instanzen im Array wurde nicht unter Verwendung desCSSStyleSheet()-Konstruktors erstellt oder in einem anderen Dokument als dem aktuellen Dokument konstruiert, wie z. B. in einem Frame.
Beispiele
Ein Stylesheet übernehmen
Der untenstehende Code zeigt, wie ein Stylesheet konstruiert wird, und dann wird CSSStyleSheet.replaceSync() aufgerufen, um eine Regel zum Stylesheet 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 = [sheet];
Wir können eine neue Regel mit CSSStyleSheet.insertRule() zum Stylesheet hinzufügen.
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
Ein neues Stylesheet anhängen
Um ein ganz neues Stylesheet zur adoptedStyleSheets-Eigenschaft hinzuzufügen, müssen wir ein neues kombiniertes Array erstellen und zuweisen. Dies wird unten mit Spread-Syntax demonstriert:
const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");
// Combine the existing sheets and new one
document.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet];
Ein Stylesheet mit einem Shadow DOM teilen
Wir können ein Stylesheet auf ähnliche Weise mit einem Shadow-Root-Element 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 |