CSS-Scoping
Das CSS-Scoping-Modul definiert die CSS-Scoping- und -Kapselungsmechanismen mit Schwerpunkt auf dem Shadow DOM Scoping Mechanismus.
CSS-Stile sind entweder global im Umfang oder auf einen Shadow-Tree beschränkt. Global definierte Stile gelten für alle Elemente im Baum, die mit dem Selektor übereinstimmen, 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 ihrer Scopes.
Innerhalb des CSS eines Shadow-Trees wählen Selektoren keine Elemente außerhalb des Baums aus, weder im globalen Bereich noch in anderen Shadow-Trees. Jedes benutzerdefinierte Element hat seinen eigenen Shadow-Tree, der alle Komponenten enthält, die das benutzerdefinierte Element ausmachen (jedoch nicht das benutzerdefinierte Element oder den "Host" selbst).
Manchmal ist es nützlich, einen Host aus dem Kontext des Shadow-Trees stylen zu können. Das CSS-Scoping-Modul ermöglicht dies durch die Definition von Selektoren, die:
- Es 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 eingerichtet ist, externe Stile zu akzeptieren).
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 des Anfügens eines Shadow DOM an ein Element, Hinzufügens zum Shadow DOM-Baum und Stylens.
- Verwendung von Templates und Slots
-
Definieren von wiederverwendbaren HTML-Strukturen mit den Elementen
<template>und<slot>, und deren Verwendung innerhalb von Webkomponenten. - Verwendung von benutzerdefinierten Elementen
-
Einführung in die Custom Elements API, die JavaScript-API zur Erstellung benutzerdefinierter Elemente, die Funktionalität kapseln.
Verwandte Konzepte
-
CSS
:definedPseudoklasse -
CSS
::partPseudoelement -
HTML
<template>Element -
HTML
<slot>Element -
HTML
slotAttribut -
Shadow-Tree Glossarbegriff
-
DOM Glossarbegriff
-
Komplexer Selektor Begriff
-
Selektor-Liste Begriff
-
Webkomponenten Schnittstellen, Eigenschaften und Methoden
CustomElementRegistrySchnittstelleElementAPIElement.slotEigenschaftElement.assignedSlotEigenschaftElement.attachShadow()Methode
HTMLSlotElementSchnittstelleHTMLTemplateElementSchnittstelleShadowRootSchnittstelle
Hinweis:
Trotz des Namens wird die :scope Pseudoklasse, die Elemente darstellt, die Referenzpunkte (oder Scopes) sind, anhand derer Selektoren übereinstimmen, im Selectors Modul definiert. Sie ist ansonsten nicht mit dem CSS-Scoping-Modul verwandt, das sich auf Scoping im Zusammenhang mit dem Shadow DOM-Scoping-Mechanismus konzentriert.
Spezifikationen
| Specification |
|---|
| CSS Scoping Module Level 1 |
Siehe auch
- CSS-Selektoren Modul
- CSS-Pseudoelemente Modul
- CSS-Namensräume Modul
- CSS-Shadow-Parts Modul
- Template, Slot und Shadow auf web.dev (2023)
- Best Practices für benutzerdefinierte Elemente auf web.dev (2019)