CSS-Scoping
Das CSS-Scoping-Modul definiert die Mechanismen zur CSS-Einschränkung und Kapselung, wobei der Schwerpunkt auf dem Shadow DOM-Scoping liegt.
CSS-Stile sind entweder global oder auf einen shadow tree beschränkt. Global beschränkte Stile gelten für alle Elemente im Knotentree, die dem Selektor entsprechen, 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 ihrer Scopes.
Innerhalb des CSS eines Shadow-Trees 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-Trees, 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 aus zu stylen. Das CSS-Scoping-Modul macht dies möglich, indem es Selektoren definiert, die:
- Einem Shadow-Trees ermöglichen, seinen Host zu stylen.
- Externem CSS ermöglichen, Elemente innerhalb eines Shadow DOMs zu stylen (aber nur, wenn das zugehörige benutzerdefinierte Element für externe Stile eingerichtet ist).
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 getrennt ist.
- Verwendung von Shadow DOM
-
Grundlagen von Shadow DOM, einschließlich der Verknüpfung eines Shadow DOMs mit einem Element, Hinzufügung zum Shadow-DOM-Baum und Styling.
- Verwendung von Templates und Slots
-
Definition wiederverwendbarer HTML-Strukturen unter Verwendung von
<template>- und<slot>-Elementen und Verwendung dieser Strukturen innerhalb von Webkomponenten. - Verwendung benutzerdefinierter Elemente
-
Einführung in die Custom Elements API, die JavaScript-API zur Erstellung benutzerdefinierter Elemente, die Funktionalitäten kapseln.
Verwandte Konzepte
-
CSS-
:defined-Pseudoklasse -
CSS-
::part-Pseudo-Element -
HTML-
<template>-Element -
HTML-
<slot>-Element -
HTML-
slot-Attribut -
Shadow tree-Glossarbegriff
-
DOM-Glossarbegriff
-
Zusammengesetzter Selektor-Begriff
-
Selector-Liste-Begriff
-
Webkomponenten-Schnittstellen, Eigenschaften und Methoden
CustomElementRegistry-SchnittstelleElement-APIElement.slot-EigenschaftElement.assignedSlot-EigenschaftElement.attachShadow()-Methode
HTMLSlotElement-SchnittstelleHTMLTemplateElement-SchnittstelleShadowRoot-Schnittstelle
Hinweis:
Trotz des Namens ist die :scope-Pseudoklasse, die Elemente darstellt, die als Referenzpunkt (oder Scope) dienen, damit Selektoren übereinstimmen, im Selektoren-Modul definiert. Sie ist sonst 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-Selectoren-Modul
- CSS-Pseudo-Elemente-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)