@scope für begrenzte Stile

Die @scope-At-Rule (Chrome 118+, Safari 17.4+) beschränkt CSS-Regeln auf einen bestimmten Teilbaum des DOM. Regeln innerhalb von @scope werden nur auf Elemente innerhalb des deklarierten Scope-Roots angewendet und verhindern so das Übergreifen von Stilen über Komponenten hinweg.

Definieren Sie einen Scope mit einem Selektor für die Scope-Root. Alle darin enthaltenen Regeln gelten nur für Nachfahren übereinstimmender Scope-Roots und nicht für das gesamte Dokument.

Die Scope-Root (@scope (.card)) definiert den Einstiegspunkt. Elemente innerhalb des Scopes, die auf .title passen, werden formatiert. Elemente außerhalb von .card mit der Klasse .title bleiben unbeeinflusst – echte Style-Kapselung ohne Shadow DOM.

Optional können Sie mit to eine Scope-Grenze definieren: @scope (.card) to (.nested-card). Die Regeln gelten innerhalb von .card, enden aber an Nachfahren von .nested-card – so werden Stile auf eine Ebene der Komponentenverschachtelung begrenzt und tiefere Instanzen ausgeschlossen.

Innerhalb eines @scope-Blocks verweist :scope auf das Scope-Root-Element selbst. @scope (.card) { :scope { border-radius: 8px; } } formatiert direkt das .card-Element, nicht seine Nachfahren.

@scope führt eine auf Nähe basierende Spezifität ein: Wenn mehrere Scopes auf ein Element zutreffen, gewinnt die nächstgelegene übergeordnete Scope-Root – unabhängig von der Spezifität des Selektors. Dadurch wird verhindert, dass tief verschachtelte Komponentenstile von Stilen aus weit entfernten übergeordneten Scopes überschrieben werden.

CSS Modules erzeugen eindeutige, gehashte Klassennamen und erreichen so zur Build-Zeit einen begrenzten Geltungsbereich – eine Angelegenheit des JavaScript-Bundlers. @scope stellt den Geltungsbereich nativ im Browser her, ganz ohne Build-Tools, gehashte Namen oder frameworkspezifische Syntax – reines CSS.

Shadow DOM sorgt für eine vollständige Stilisolierung – externe Styles können nicht eindringen. @scope sorgt für eine teilweise Isolierung – Styles von außen können weiterhin auf Elemente innerhalb des Geltungsbereichs angewendet werden, wenn ihre Spezifität hoch genug ist. @scope ist eine schlankere Alternative zur Kapselung von Komponenten, ohne vollständige Isolierung.

Kombinieren Sie @scope mit @layer, um die Kaskade feingranular zu steuern: Definieren Sie auf die Komponente begrenzte Styles in einer Komponentenebene. So verwalten Sie sowohl die Reihenfolge der Kaskade (über Ebenen) als auch den Geltungsbereich von Styles (über @scope) auf eine zusammensetzbare Weise – ganz ohne komplizierte Tricks bei der Benennung von Klassen.

Komponenten eines Designsystems: Begrenzen Sie alle Button-Styles mit @scope (.button-group), damit die Styles innerer Buttons niemals nach außen gelangen. Isolierung von Widgets: Begrenzen Sie die Styles eines Widgets eines Drittanbieters auf dessen Container, um Konflikte mit den globalen Styles der Seite zu verhindern.

@scope wird von Chrome 118+, Safari 17.4+ und Firefox 128+ unterstützt. In nicht unterstützten Browsern werden Styles innerhalb von @scope ignoriert – die Kaskade greift auf globale Styles zurück. Verwenden Sie @scope als progressive Verbesserung, wenn die Kapselung von Komponenten hilfreich, aber nicht entscheidend ist.

@scope begrenzt die Anwendung von CSS-Regeln auf einen deklarierten DOM-Teilbaum und ermöglicht so eine native Kapselung von Styles – ohne Shadow DOM oder das Hashing von Klassennamen durch Build-Tools. Begrenzungen des Geltungsbereichs, Spezifität durch Nähe und die Integration mit @layer machen @scope zu einem leistungsfähigen Grundbaustein für komponentenbezogene Designsysteme mit reinem CSS.