HTML und CSS · Senior · Frage 24 von 75
Wie stylt man das Innere einer Web Component, wenn Shadow DOM ihre Styles isoliert?
- 1Mit globalen Selektoren plus
!important- sie durchdringen den Shadow Root - 2Über CSS-Variablen (sie werden über die Grenze vererbt) und
::part() - 3Gar nicht: Shadow DOM verbietet jedes Stylen von außen vollständig
Antwort zeigen
Richtige Antwort: Über CSS-Variablen (sie werden über die Grenze vererbt) und ::part()
Erklärung
Selektoren von außen erreichen einen Shadow Root nicht, auch nicht mit !important. Vererbte Eigenschaften (color, font) und Custom Properties überqueren die Grenze aber - darauf baut Theming auf. Der Autor der Komponente kann Teile über part="label" freigeben, die man von außen mit my-el::part(label) stylt. Inhalt in Slots (Light DOM) stylt man mit normalem CSS.