Part und Exportparts für externe Formatierung

Die strikte Style-Kapselung des Shadow DOM verhindert, dass Nutzer einzelne Elemente innerhalb einer Komponente neu stylen. CSS-Variablen eignen sich für globale Eigenschaften, aber Sie können beispielsweise dem internen "close"-Button keinen eigenen border-radius geben. Parts lösen dieses Problem.

Markieren Sie ein Element innerhalb des Shadow Tree mit part="name". Nutzer können es dann mit dem Pseudoelement ::part(name) ansprechen: my-dialog::part(close-button) { color: red; }. Das benannte Element wird zu einer Styling-Schnittstelle, während der restliche Shadow Tree gekapselt bleibt.

Trennen Sie die Namen durch Leerzeichen, um ein Element als mehrere Parts bereitzustellen: part="button primary". ::part(button) spricht es allgemein an, ::part(primary) als Element im Primärstil. Jeder Name wird unabhängig abgeglichen.

::part erlaubt nur bestimmte Pseudoklassen (:hover, :focus, :disabled) – keine Nachfahren-Kombinatoren oder weitergehende strukturelle Auswahl. ::part(card) p ist ungültig; Sie können mit Nachfahren-Selektoren nicht in einen Part hineinreichen.

Wenn ein Custom Element innerhalb seines eigenen Shadow Tree ein weiteres Custom Element enthält, werden die Parts des inneren Elements normalerweise nicht für die äußere Seite bereitgestellt. exportparts="close-button" auf dem verschachtelten Element leitet diese Parts an den äußeren Host weiter.

exportparts="close-button: dismiss" exportiert den inneren Part unter einem neuen Namen am äußeren Element. So kann die äußere Komponente eine klar benannte Schnittstelle anbieten, unabhängig davon, welche internen Elemente sie zusammensetzt.

Custom Properties stellen Werte bereit, etwa Farben, Abstände und Schriftarten. Parts stellen Elemente bereit, einschließlich der vollständigen CSS-Oberfläche für Rahmen, Transformationen und Animationen. Verwenden Sie Custom Properties für globale Tokens und Parts für individuelle Anpassungen auf Elementebene. Beides kann in derselben Komponente koexistieren.

Praxis in Designsystemen: Stellen Sie für die am häufigsten angepassten Elemente, etwa Buttons, Header und Indikatoren, eine kleine Auswahl an Parts bereit und ergänzen Sie sie durch eine großzügige Menge an Custom Properties für Farben, Abstände und Typografie. Nutzer können je nach Bedarf entweder auf Wertebene oder auf Elementebene themen.

Part-Namen werden zu einem Bestandteil der öffentlichen API der Komponente – Änderungen daran beschädigen das CSS der Nutzer. Wählen Sie Namen, die die Rolle des Elements beschreiben, etwa "close-button", "header" oder "track", statt seine Position, etwa "first-button", damit die API auch bei einer Weiterentwicklung der Implementierung aussagekräftig bleibt.

Führen Sie alle verfügbaren Parts und exportierten Parts in der readme der Komponente auf. Ohne Dokumentation müssen Nutzer das DOM untersuchen, um Parts zu entdecken, und werden dadurch an das gekoppelt, was sie zufällig vorfinden. Behandeln Sie die Part-Liste wie die Props-Liste einer Framework-Komponente.

::part und exportparts werden von allen modernen Browsern unterstützt. Selbst ältere Safari-Versionen unterstützen ::part inzwischen. Verwenden Sie beides unbedenklich; für sehr alte Browser, die größtenteils nicht mehr verwendet werden, können Sie als Ausweichlösung zusätzliche CSS Custom Properties einsetzen.

Das part-Attribut stellt einzelne Elemente des Shadow Tree über ::part(name) für externes Styling bereit – mit der vollständigen Leistungsfähigkeit von CSS, ohne die Kapselung zu verletzen. exportparts leitet Parts aus verschachtelten Custom Elements an den äußeren Host weiter und kann sie dabei optional umbenennen. Kombinieren Sie Parts mit CSS Custom Properties zu einer vollständigen Theming-Schnittstelle und dokumentieren Sie die Part-Liste als Bestandteil der Komponenten-API.