Document: adoptedStyleSheets-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2023.
Die adoptedStyleSheets-Eigenschaft der Document-Schnittstelle wird verwendet, um ein Array von konstruierten Stylesheets festzulegen, die vom Dokument verwendet werden sollen.
Hinweis:
Ein konstruiertes Stylesheet ist ein Stylesheet, das programmatisch mithilfe des CSSStyleSheet()-Konstruktors erstellt wurde (im Gegensatz zu einem, das von einem User-Agent erstellt wird, wenn ein Stylesheet aus einem Skript importiert wird, importiert über <style> und @import, oder verlinkt über <link>).
Die gleichen konstruierten Stylesheets können auch mit einer oder mehreren ShadowRoot-Instanzen über die ShadowRoot.adoptedStyleSheets-Eigenschaft geteilt werden. Eine Änderung an einem übernommenen Stylesheet wirkt sich auf alle Objekte aus, die es übernommen haben.
Die 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 denen in Document.styleSheets geordnet sind.
Nur Stylesheets, die mit dem CSSStyleSheet()-Konstruktor im Kontext des aktuellen Document erstellt wurden, dürfen übernommen werden.
Wert
Der Wert ist ein Array von CSSStyleSheet-Instanzen, die mit dem CSSStyleSheet()-Konstruktor innerhalb des Kontexts desselben Document erstellt worden sein müssen.
Falls 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 gelten überall dort, wo das Stylesheet übernommen wird.
In einer früheren Version der Spezifikation war das Array nicht modifizierbar, daher war die einzige Möglichkeit, neue Stylesheets hinzuzufügen, ein neues Array adoptedStyleSheets zuzuweisen.
Ausnahmen
NotAllowedErrorDOMException-
Eine der
CSSStyleSheet-Instanzen im Array wurde nicht mit demCSSStyleSheet()-Konstruktor erstellt oder in einem anderen Dokument als dem aktuellen Dokument konstruiert, zum Beispiel 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 Sheet 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 hinzufügen, indem wir CSSStyleSheet.insertRule() verwenden.
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 Schatten-Stamm 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 |