Web Components: Custom Elements, Shadow DOM und wo die Kapselung endet

Worum es geht

Drei Browser-Funktionen bilden zusammen Web Components. Custom Elements: eine von HTMLElement erbende Klasse, registriert mit customElements.define("x-name", Class) (der Name muss einen Bindestrich enthalten), mit connectedCallback, disconnectedCallback und attributeChangedCallback für die in einem statischen Array observedAttributes aufgeführten Attribute. Shadow DOM: attachShadow({ mode: "open" }) gibt dem Element einen privaten Teilbaum; MDN hält fest, dass Stile darin auf diesen Baum beschränkt sind, sodass Seitenstile keine Shadow-Elemente beeinflussen und Shadow-Stile nicht die Seite, und <slot> projiziert Light-DOM-Kinder hinein. Templates: <template> enthält inertes Markup, und <template shadowrootmode="open"> deklariert einen Shadow Root in serverseitig gerendertem HTML ohne Skript.

Warum es wichtig ist

Custom Elements sind das einzige Komponentenmodell, das der Browser selbst versteht: Sie funktionieren in jedem Framework oder ganz ohne, überstehen Framework-Migrationen und lassen sich aus reinem, serverseitig gerendertem HTML verwenden. Der Preis dafür ist, dass die Kapselung echt ist und jedes grenzüberschreitende Anliegen (Theming, Formulare, Labels, Fokus, Ereignisse) eine ausdrückliche Öffnung braucht.

So wird es angewendet

• Styling-Angriffsflächen bewusst freigeben: Custom Properties für Werte (sie vererben sich in den Shadow-Baum) und part="label" auf inneren Elementen, damit die Seite x-name::part(label) schreiben kann; MDN beschreibt part als Mittel, ein Shadow-Element für das übergeordnete DOM sichtbar zu machen.
• Formularelemente zu echten Teilnehmern machen mit static formAssociated = true und ElementInternals (setFormValue, setValidity); ohne dies übermittelt ein eigener Input nie einen Wert.
• Autonome Elemente bevorzugen; MDN merkt an, dass Safari keine Unterstützung für Customized Built-ins (is="...") plant.
• Den Ausgangszustand mit deklarativem Shadow DOM rendern, wenn das erste Rendern oder Crawler wichtig sind, und ihn dann mit der Klasse aufwerten (Upgrade).
• Wichtigen Zustand als Attribute widerspiegeln, damit CSS und Tests darauf selektieren können; mode: "open" beibehalten (MDN erklärt, dass der Modus closed keinen starken Sicherheitsmechanismus darstellt, sondern nur ein Signal ist).
• x-name:not(:defined) für die Zeit stylen, bevor das Skript läuft, damit der Inhalt beim Upgrade nicht springt.

Stolpersteine

ID-Verweise überschreiten die Grenze nicht: Ein <label for> oder aria-labelledby in der Seite kann nicht auf einen Input im Shadow zeigen, weshalb entweder das Steuerelement per Slot aus dem Light DOM eingebracht oder innerhalb beschriftet werden muss. Globale Resets, Utility-Klassen und Icon-Sprites gelten nicht innerhalb. Eigene Events brauchen composed: true, um ausserhalb gehört zu werden. Dieselbe Bezeichnung zweimal zu registrieren löst einen Fehler aus, was zuschlägt, wenn zwei Bundles dieselbe Komponente ausliefern. Die Entwicklerwerkzeuge zeigen den Shadow-Baum, document.querySelector aber nicht.