Gekapselte Stile im Shadow DOM

Jede <style>-Regel innerhalb eines Shadow Root gilt nur innerhalb dieses Roots. p { color: red } in einem Shadow Tree färbt nur Absätze innerhalb dieses Shadow Tree – Absätze im Hauptdokument bleiben unverändert, und Styles aus dem Hauptdokument reichen nicht in den Shadow Tree hinein.

Die Kapselung beseitigt das Problem globaler CSS-Regeln, das große Anwendungen seit Jahrzehnten begleitet. Die Styles einer Komponente können nicht versehentlich durch Site-CSS überschrieben werden, und die Komponente kann die Website nicht unbeabsichtigt beeinträchtigen. Die Grenze ist durch die Spezifikation festgelegt, nicht durch eine Konvention.

Stylen Sie den Host innerhalb des Shadow Tree mit :host. Verwenden Sie :host(selector), um den Gültigkeitsbereich anhand eines Selektors einzuschränken: :host([open]) { display: block; } trifft nur dann auf den Host zu, wenn das open-Attribut vorhanden ist.

Vererbte CSS-Eigenschaften (color, font-family, line-height) überschreiten die Shadow-DOM-Grenze weiterhin durch Vererbung. Eine Einstellung body { color: blue } im Dokument färbt auch den Text im Shadow Tree blau, sofern der Shadow Tree dies nicht ausdrücklich überschreibt. Das ist ein Vorteil: Typografie-Standards bleiben konsistent.

Custom Properties, also CSS-Variablen, werden durch Shadow Roots vererbt. Dadurch sind sie die etablierte Methode, um eine Theming-API für eine Komponente bereitzustellen: Deklarieren Sie --card-bg: var(--surface, white) innerhalb des Shadow Tree und lassen Sie Nutzer --surface auf dem Host überschreiben.

Markieren Sie ein Element innerhalb des Shadow Tree mit part="name", und Nutzer können es mit my-card::part(name) { ... } stylen. Verwenden Sie Parts als individuelle Styling-Schnittstellen, während der größte Teil des Shadow Tree gekapselt bleibt.

shadowRoot.adoptedStyleSheets = [sheet] verwendet ein CSSStyleSheet in mehreren Shadow Roots gemeinsam und vermeidet dadurch wiederholtes Parsen von <style>. Erstellen Sie Stylesheets mit new CSSStyleSheet() und sheet.replaceSync(cssText). Das bringt in Designsystemen einen großen Performancegewinn.

Platzieren Sie <style>-Tags ganz oben im innerHTML des Shadow Tree, damit die Styles vor dem restlichen Aufbau des DOM geparst werden. So vermeiden Sie das kurze Aufblitzen ungestylter Inhalte, das auftritt, wenn Styles beim Parsen zu spät eintreffen.

:host-context(.dark-mode) :host stylt den Host anhand eines Vorfahren-Selektors außerhalb des Shadow Tree. Das ist nützlich, um Komponenten anhand einer Klasse auf einem übergeordneten Wrapper zu themen. Die Browserunterstützung ist gut, sollte aber in Ihrer Zielmatrix überprüft werden.

Dokumentweite CSS-Resets, etwa Ränder auf body oder box-sizing, wirken sich nicht auf Shadow Trees aus. Wenden Sie benötigte Resets in jedem Shadow Root erneut an oder teilen Sie sie über ein konstruiertes Stylesheet, das in jede Komponente übernommen wird.

Chrome DevTools zeigt Shadow Roots im Elements-Panel unter „#shadow-root (open)“ an. Sie können Shadow-Styles wie jedes andere CSS untersuchen, bearbeiten und aktivieren oder deaktivieren, einschließlich der :host-Pseudoklasse und von ::part-Regeln.

Warum sind CSS Custom Properties, also Variablen, die bevorzugte Methode zum Theming einer Shadow-DOM-Komponente?

Der Shadow DOM kapselt Styles in beide Richtungen. Stylen Sie den Host mit :host, stellen Sie über vererbte CSS Custom Properties Theming-Schnittstellen bereit, machen Sie einzelne Elemente mit ::part für das Styling zugänglich, teilen Sie Stylesheets mit adoptedStyleSheets und wenden Sie Resets in jedem Shadow Root erneut an, da dokumentweite CSS-Regeln die Grenze nicht überschreiten.