CSS-Scoping

Das CSS-Scoping-Modul definiert die Mechanismen für CSS-Scoping und -Kapselung, wobei der Schwerpunkt auf dem Shadow DOM-Scoping-Mechanismus liegt.

CSS-Stile sind entweder global im Geltungsbereich oder auf einen shadow tree beschränkt. Global gültige Stile gelten für alle Elemente im Knotenbaum, die dem Selektor entsprechen, einschließlich benutzerdefinierter Elemente in diesem Baum, jedoch nicht für die Shadow Trees, die jedes benutzerdefinierte Element zusammensetzen. Selektoren und ihre zugehörigen Stildefinitionen überschreiten nicht die Grenzen zwischen den Scopes.

Innerhalb des CSS eines Shadow Trees wählen Selektoren keine Elemente außerhalb des Trees aus, weder im globalen Geltungsbereich noch in anderen Shadow Trees. Jedes benutzerdefinierte Element besitzt seinen eigenen Shadow Tree, der alle Komponenten enthält, die das benutzerdefinierte Element bilden (aber nicht das benutzerdefinierte Element oder den "Host" selbst).

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.
  • 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 zur Erstellung wiederverwendbarer Webkomponenten – benutzerdefinierte Elemente, deren Funktionalität vom Rest Ihres Codes gekapselt ist.

Verwendung von Shadow DOM

Grundlagen des Shadow DOM, einschließlich der Anbindung eines Shadow DOM an ein Element, Hinzufügen zum Shadow DOM Tree und Styling.

Verwenden von Templates und Slots

Definieren von wiederverwendbaren HTML-Strukturen mit <template> und <slot>-Elementen und Verwenden dieser Struktur 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 Pseudo-Klasse, die Elemente darstellt, die ein Bezugspunkt (oder Scope) für Selektoren zum Abgleichen sind, im Selectors-Modul definiert. Ansonsten steht sie in keinem Zusammenhang mit dem CSS-Scoping-Modul, das sich auf Scoping in Bezug auf den Shadow DOM-Scoping-Mechanismus konzentriert.

Spezifikationen

Specification
CSS Scoping Module Level 1

Siehe auch