Document: adoptedStyleSheets property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.
Die Eigenschaft adoptedStyleSheets des Interfaces Document wird verwendet, um ein Array von konstruierten Stylesheets festzulegen, die vom Dokument verwendet werden sollen.
Hinweis:
Ein konstruiertes Stylesheet ist ein Stylesheet, das programmgesteuert mit dem CSSStyleSheet() constructor erstellt wurde (im Gegensatz zu einem, das von einem User-Agent beim Importieren eines Stylesheets aus einem Skript erstellt wird, importiert mit <style> und @import, oder über <link> verknüpft wird).
Dieselben konstruierten Stylesheets können auch mithilfe der Eigenschaft ShadowRoot.adoptedStyleSheets mit einer oder mehreren ShadowRoot-Instanzen geteilt werden.
Das Ändern eines adoptierten Stylesheets wirkt sich auf alle Objekte aus, die es übernehmen.
Stylesheets in der Eigenschaft werden zusammen mit den anderen Stylesheets des Dokuments unter Verwendung des CSS-Kaskadenalgorithmus ausgewertet.
Wenn die Auflösung von Regeln die Reihenfolge der Stylesheets berücksichtigt, wird angenommen, dass adoptedStyleSheets nach denen in Document.styleSheets angeordnet sind.
Nur konstruierte Stylesheets im Kontext des aktuellen Document können übernommen werden. Sie können konstruierte Stylesheets mit dem CSSStyleSheet() constructor oder durch Importieren von CSS-Modulen erstellen.
Wert
Der Wert ist ein Array von CSSStyleSheet-Instanzen, die im Kontext desselben Document mit dem CSSStyleSheet() constructor 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 geändert werden; diese Änderungen gelten überall dort, wo das Stylesheet übernommen wird.
In einer früheren Version der Spezifikation war das Array nicht veränderbar, sodass die einzige Möglichkeit, neue Stylesheets hinzuzufügen, darin bestand, adoptedStyleSheets ein neues Array zuzuweisen.
Ausnahmen
NotAllowedErrorDOMException-
Eine der
CSSStyleSheet-Instanzen im Array wurde nicht mit demCSSStyleSheet()constructor erstellt oder wurde in einem anderen Dokument als dem aktuellen Dokument konstruiert, etwa in einem Frame.
Beispiele
Ein Stylesheet übernehmen
Der folgende Code zeigt, wie ein Stylesheet konstruiert wird und anschließend CSSStyleSheet.replaceSync() aufgerufen wird, um dem Stylesheet eine Regel hinzuzufügen.
Das Stylesheet wird dann einem Array hinzugefügt und der Eigenschaft adoptedStyleSheets 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 dem Stylesheet mit CSSStyleSheet.insertRule() eine neue Regel hinzufügen.
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
Ein Stylesheet mit einem Shadow DOM teilen
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
| Spezifikation |
|---|
| CSS Object Model (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |