ShadowRoot.styleSheets — Eigenschaft · JavaScript-Referenz

Signatur

ShadowRoot.styleSheets

Beschreibung

Die schreibgeschützte Eigenschaft styleSheets eines ShadowRoot gibt eine StyleSheetList mit CSSStyleSheet-Objekten zurück. Darin stehen alle Stylesheets, die direkt im Shadow-Baum eingebunden sind, also über <style>-Elemente oder <link rel="stylesheet">. Sie ist das Gegenstück zu document.styleSheets, bezieht sich aber nur auf den gekapselten Shadow-DOM.

Nützlich ist die Eigenschaft, wenn man Styles einer Web Component zur Laufzeit untersuchen, debuggen oder anpassen will. Über die enthaltenen CSSStyleSheet-Objekte lassen sich mit cssRules, insertRule() und deleteRule() einzelne Regeln lesen und ändern, ohne das Markup anzufassen.

Wichtig: Stylesheets, die über shadowRoot.adoptedStyleSheets übernommen wurden (Constructable Stylesheets), tauchen in styleSheets nicht auf. Die zurückgegebene Liste ist live: Kommen <style>-Elemente hinzu oder werden welche entfernt, ändert sich die Liste mit.

Rückgabewert

Typ

StyleSheetList

Beschreibung

Eine live aktualisierte, array-ähnliche Liste von CSSStyleSheet-Objekten in der Reihenfolge, in der sie im Shadow-Baum vorkommen. Ohne eingebettete Stylesheets ist die Liste leer (length === 0).

Beispiele

Stylesheets eines Shadow-Baums zählen und auslesen

const host = document.createElement('div');
document.body.append(host);
const shadow = host.attachShadow({ mode: 'open' });

shadow.innerHTML = `
  <style>p { color: rebeccapurple; }</style>
  <style>.hinweis { font-weight: bold; }</style>
  <p class="hinweis">Hallo aus dem Shadow DOM</p>
`;

console.log(shadow.styleSheets.length);
for (const sheet of shadow.styleSheets) {
  console.log([...sheet.cssRules].map((r) => r.cssText));
}

2 ["p { color: rebeccapurple; }"] [".hinweis { font-weight: bold; }"]

Regel zur Laufzeit in einer Web Component ergänzen

class ThemeBox extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>:host { display: block; padding: 1rem; }</style>
      <slot></slot>
    `;
  }

  setDarkMode(enabled) {
    const [sheet] = this.shadowRoot.styleSheets;
    if (enabled) {
      sheet.insertRule(':host { background: #222; color: #eee; }', sheet.cssRules.length);
    } else if (sheet.cssRules.length > 1) {
      sheet.deleteRule(sheet.cssRules.length - 1);
    }
  }
}

customElements.define('theme-box', ThemeBox);
const box = document.createElement('theme-box');
box.textContent = 'Inhalt';
document.body.append(box);
box.setDarkMode(true);
console.log(box.shadowRoot.styleSheets[0].cssRules.length);

2

Unterschied zu adoptedStyleSheets

const host = document.createElement('section');
document.body.append(host);
const shadow = host.attachShadow({ mode: 'open' });

const adopted = new CSSStyleSheet();
adopted.replaceSync('h2 { margin: 0; }');
shadow.adoptedStyleSheets = [adopted];

shadow.innerHTML = '<style>h2 { color: teal; }</style><h2>Titel</h2>';

console.log('styleSheets:', shadow.styleSheets.length);
console.log('adoptedStyleSheets:', shadow.adoptedStyleSheets.length);

styleSheets: 1 adoptedStyleSheets: 1

// Wichtig · Fallstricke

Adoptierte Stylesheets fehlen: Sheets aus adoptedStyleSheets sind nicht in styleSheets enthalten. Für einen vollständigen Überblick müssen beide Listen ausgewertet werden.
Geschlossene Shadow Roots: Bei mode: 'closed' ist element.shadowRoot gleich null. Auf styleSheets kommt man dann nur über die beim attachShadow() gespeicherte Referenz.
Externe Stylesheets: Ein <link rel="stylesheet"> steht eventuell erst nach dem Laden in der Liste. Außerdem löst der Zugriff auf cssRules bei Sheets von fremden Ursprüngen ohne passende CORS-Header einen SecurityError aus.
Live-Liste: StyleSheetList ist kein echtes Array. Für map()/filter() vorher mit Array.from() oder dem Spread-Operator umwandeln.
Die Eigenschaft ist schreibgeschützt: Eine Zuweisung wird ignoriert bzw. wirft im Strict Mode einen TypeError.
Browser-Unterstützung: in allen aktuellen Browsern vorhanden, im Internet Explorer nicht.

Siehe auch

ShadowRoot ShadowRoot.adoptedStyleSheets Document.styleSheets StyleSheetList CSSStyleSheet Element.attachShadow() ShadowRoot.activeElement