CSSScopeRule.end — Eigenschaft · JavaScript-Referenz

Signatur

CSSScopeRule.end

Beschreibung

Die schreibgeschützte Eigenschaft end der Schnittstelle CSSScopeRule liefert das Scope-Limit einer @scope-At-Regel. Das ist der Teil nach dem Schlüsselwort to, also z. B. .card-footer in @scope (.card) to (.card-footer) { … }. Das Limit legt die untere Grenze fest: Elemente innerhalb eines passenden Elements werden nicht mehr gestylt. So entsteht ein „Donut-Scope“.

Der Wert ist die serialisierte Selektorliste ohne die umgebenden Klammern. Hat die Regel kein to (...), ist der Wert null. Das Gegenstück ist CSSScopeRule.start, das die Scope-Wurzel liefert.

Nützlich ist die Eigenschaft vor allem für Werkzeuge, die Stylesheets untersuchen: CSS-Linter, DevTools-Erweiterungen, Stilanalysen oder Tests, die prüfen, ob Komponenten-Styles richtig abgegrenzt sind. An die Regeln kommt man über document.styleSheets und CSSStyleSheet.cssRules. Mit instanceof CSSScopeRule filtert man die passenden Einträge heraus.

Rückgabewert

Typ

string | null

Beschreibung

Die serialisierte Selektorliste des Scope-Limits, z. B. ".card-footer", oder null, wenn die @scope-Regel kein to (...) enthält.

Beispiele

Scope-Limit einer @scope-Regel auslesen

const style = document.createElement('style');
style.textContent = `
  @scope (.card) to (.card-footer) {
    img { border-radius: 8px; }
  }
`;
document.head.append(style);

const rule = style.sheet.cssRules[0];
if (rule instanceof CSSScopeRule) {
  console.log('Wurzel:', rule.start);
  console.log('Limit:', rule.end);
}

Wurzel: .card Limit: .card-footer

null bei @scope ohne Limit

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @scope (.sidebar) {
    a { color: teal; }
  }
`);

const [rule] = sheet.cssRules;
console.log(rule.end);          // kein 'to (...)' vorhanden
console.log(rule.end ?? 'unbegrenzt');

null unbegrenzt

Alle Scope-Regeln im Dokument analysieren (Lint-Hilfe)

const collectScopes = (rules, result = []) => {
  for (const rule of rules) {
    if (rule instanceof CSSScopeRule) {
      result.push({ start: rule.start, end: rule.end });
    }
    // verschachtelte Gruppen (@media, @layer, @scope) durchsuchen
    if (rule.cssRules) collectScopes(rule.cssRules, result);
  }
  return result;
};

const scopes = [...document.styleSheets].flatMap((sheet) => {
  try {
    return collectScopes(sheet.cssRules);
  } catch {
    return []; // Cross-Origin-Stylesheet: kein Zugriff
  }
});

const ohneLimit = scopes.filter(({ end }) => end === null);
console.table(ohneLimit);

// Wichtig · Fallstricke

Schreibgeschützt: Wenn man end etwas zuweist, passiert nichts (im Strict Mode gibt es einen TypeError). Um das Limit zu ändern, löscht man die Regel und fügt sie neu ein, z. B. mit deleteRule() und insertRule().
Keine Klammern: Der Wert enthält nur die Selektorliste, also .card-footer und nicht (.card-footer). Die Schreibweise kann vom Quelltext abweichen, weil der Browser sie normalisiert (Leerzeichen, Kommas).
Auf null prüfen: Ohne to (...) ist der Wert null und kein leerer String. Nutze ?? oder einen Vergleich mit === null.
Cross-Origin: Bei Stylesheets von fremden Ursprüngen ohne CORS löst der Zugriff auf cssRules einen SecurityError aus.
Kompatibilität: @scope und CSSScopeRule gibt es in Chromium ab 118 und in Safari ab 17.4. Firefox unterstützt beides erst in neueren Versionen. Die Unterstützung prüfst du mit typeof CSSScopeRule !== 'undefined'. Browser ohne Unterstützung verwerfen die @scope-Regel beim Parsen, sie erscheint dann nicht in cssRules.

Siehe auch

CSSScopeRule CSSScopeRule.start CSSGroupingRule CSSStyleSheet.cssRules Document.styleSheets CSSStyleSheet.insertRule() CSSImportRule.media