CSS-Skopierung
Das CSS-Skopierungsmodul definiert die Mechanismen der CSS-Skopierung und -Kapselung, wobei der Fokus auf dem Shadow DOM Skopierungsmechanismus liegt.
CSS-Stile sind entweder global im Umfang oder auf einen shadow tree beschränkt. Global skopierte Stile gelten für alle Elemente im Knotenbaum, die dem Selektor entsprechen, einschließlich benutzerdefinierter Elemente in diesem Baum, jedoch nicht für die Schattenbäume, die jedes benutzerdefinierte Element zusammensetzen. Selektoren und ihre zugehörigen Stildefinitionen durchdringen keine Skopen.
Innerhalb des CSS eines shadow trees wählen Selektoren keine Elemente außerhalb des Baums, weder im globalen Skopus 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 heraus zu stylen. Das CSS-Skopierungsmodul macht dies möglich, indem es Selektoren definiert, die:
- einem shadow tree ermöglichen, seinen Host zu stylen.
- externem CSS erlauben, Elemente innerhalb eines Shadow DOM zu stylen (jedoch nur, wenn das zugehörige benutzerdefinierte Element so 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 Anbindens eines Shadow DOM an ein Element, Hinzufügens zum Shadow DOM-Baum und Styling.
- Verwendung von Vorlagen und Slots
-
Definition wiederverwendbarer HTML-Strukturen mit Hilfe der Elemente
<template>und<slot>und Nutzung dieser Strukturen innerhalb von Webkomponenten. - Verwendung benutzerdefinierter Elemente
-
Einführung in die benutzerdefinierte Elemente-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
-
Zusammengesetzter Selektor Begriff
-
Selektorliste Begriff
-
Webkomponenten Schnittstellen, Eigenschaften und Methoden
CustomElementRegistrySchnittstelleElementAPIElement.slotEigenschaftElement.assignedSlotEigenschaftElement.attachShadow()Methode
HTMLSlotElementSchnittstelleHTMLTemplateElementSchnittstelleShadowRootSchnittstelle
Hinweis: Trotz des Namens wird die :scope Pseudoklasse, die Elemente repräsentiert, die einen Referenzpunkt (oder Skopus) für Selektoren darstellen, in dem Selectors Modul definiert. Sie ist ansonsten nicht mit dem CSS-Skopierungsmodul verwandt, das sich auf das Skopieren im Hinblick auf den Shadow DOM-Skopierungsmechanismus konzentriert.
Spezifikationen
| Specification |
|---|
| CSS Scoping Module Level 1 |
Siehe auch
- CSS-Selektoren Modul
- CSS-Pseudoelemente Modul
- CSS-Namespace Modul
- CSS-Shadow-Parts Modul
- Vorlage, Slot und Shadow auf web.dev (2023)
- Beste Praktiken für benutzerdefinierte Elemente auf web.dev (2019)