CSS Scoping

Das CSS scoping-Modul definiert die Mechanismen zur CSS-Abgrenzung und -Kapselung, wobei der Fokus auf dem Shadow DOM Abgrenzungsmechanismus liegt.

CSS-Stile sind entweder global oder auf einen shadow tree beschränkt. Global abgegrenzte Stile gelten für alle Elemente im Knotentree, die mit dem Selektor übereinstimmen, einschließlich benutzerdefinierter Elemente in diesem Tree, jedoch nicht für die shadow trees, die jedes benutzerdefinierte Element zusammensetzen. Selektoren und ihre zugehörigen Stildefinitionen dringen nicht zwischen den Abgrenzungen durch.

Innerhalb des CSS eines shadow trees wählen Selektoren keine Elemente außerhalb des Bäume, weder im globalen Umfang noch in anderen shadow trees. Jedes benutzerdefinierte Element hat seinen eigenen shadow tree, der alle Komponenten enthält, die das benutzerdefinierte Element ausmachen (aber nicht das benutzerdefinierte Element selbst, oder den "Host").

Manchmal ist es nützlich, einen Host aus dem Kontext des shadow trees heraus zu stylen. Das CSS scoping-Modul macht dies möglich, indem es Selektoren definiert, die:

  • einem shadow tree ermöglichen, seinen Host zu stylen.
  • externes 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 gekapselt ist.

Verwendung von Shadow DOM

Grundlagen des Shadow DOM, einschließlich der Anbringung eines Shadow DOM an ein Element, der Ergänzung des Shadow DOM Trees und des Stylings.

Verwendung von Templates und Slots

Definition einer wiederverwendbaren HTML-Struktur unter Verwendung der <template>- und <slot>-Elemente und deren Verwendung innerhalb von Webkomponenten.

Verwendung benutzerdefinierter Elemente

Einführung in die Custom Elements API, die JavaScript-API zur Erstellung benutzerdefinierter Elemente, die Funktionalität kapseln.

Verwandte Konzepte

Hinweis: Trotz des Namens wird die :scope Pseudoklasse, die Elemente repräsentiert, die einen Referenzpunkt (oder Umfang) für die Übereinstimmung von Selektoren darstellen, im Selectors Modul definiert. Sie ist ansonsten nicht mit dem CSS scoping-Modul verbunden, das sich auf Scoping in Bezug auf den Shadow DOM-Abgrenzungsmechanismus konzentriert.

Spezifikationen

Specification
CSS Scoping Module Level 1

Siehe auch