CSS-Scoping

Das CSS-Scoping-Modul definiert die CSS-Scoping- und Kapselungsmechanismen und konzentriert sich auf den Shadow DOM Scoping-Mechanismus.

CSS-Stile sind entweder global oder auf einen Shadow-Baum beschränkt. Global angewandte Stile gelten für alle Elemente im Knotensatz, die mit dem Selektor übereinstimmen, einschließlich benutzerdefinierter Elemente in diesem Baum, jedoch nicht für die Shadow-Bäume, die jedes benutzerdefinierte Element zusammensetzen. Selektoren und ihre zugehörigen Stildefinitionen überschreiten nicht die Grenzen von Scopes.

Innerhalb des CSS eines Shadow-Baums wählen Selektoren keine Elemente außerhalb des Baums aus, weder im globalen Scope noch in anderen Shadow-Bäumen. Jedes benutzerdefinierte Element hat seinen eigenen Shadow-Baum, der alle Komponenten enthält, die das benutzerdefinierte Element ausmachen (jedoch nicht das benutzerdefinierte Element oder den "Host" selbst).

Manchmal ist es nützlich, in der Lage zu sein, einen Host aus dem Kontext des Shadow-Baums zu stylen. Das CSS-Scoping-Modul macht dies möglich, indem es Selektoren definiert, die:

  • Es einem Shadow-Baum ermöglichen, seinen Host zu stylen.
  • Es externem CSS ermöglichen, Elemente innerhalb eines Shadow DOM zu stylen (aber nur, wenn das zugehörige benutzerdefinierte Element so eingerichtet ist, dass es externe Stile akzeptiert).

Referenz

Selektoren

Leitfäden

Webkomponenten

Eine Einführung in die verschiedenen Technologien, die zur Erstellung wiederverwendbarer Webkomponenten verwendet werden — benutzerdefinierte Elemente, deren Funktionalität vom Rest Ihres Codes isoliert ist.

Verwendung von Shadow DOM

Grundlagen des Shadow DOM, einschließlich der Anbindung eines Shadow DOM an ein Element, der Hinzufügung zum Shadow DOM-Baum und der Stilgebung.

Verwendung von Vorlagen und Slots

Definition wiederverwendbarer HTML-Strukturen mithilfe der <template>- und <slot>-Elemente und Verwendung dieser Strukturen in Webkomponenten.

Verwendung von benutzerdefinierten Elementen

Einführung in die Custom Elements-API, die JavaScript-API, die zum Erstellen benutzerdefinierter Elemente verwendet wird, die Funktionalität kapseln.

Verwandte Konzepte

Hinweis: Trotz des Namens ist die :scope Pseudoklasse, die Elemente darstellt, die einen Referenzpunkt (oder Scope) für Selektoren zum Abgleichen bieten, im Selectors Modul definiert. Sie ist ansonsten nicht mit dem CSS-Scoping-Modul verwandt, das sich auf Scoping in Bezug auf den Shadow DOM-Scoping-Mechanismus konzentriert.

Spezifikationen

Specification
CSS Scoping Module Level 1

Siehe auch