attachShadow und Shadow Root

Shadow DOM gibt einem Element einen eigenen isolierten DOM-Baum (den „Shadow Tree“), der im Haupt-DOM der Seite nicht erscheint. Äußeres CSS dringt nicht hinein, inneres CSS nicht hinaus – perfekte Kapselung für Komponenten.

Rufen Sie this.attachShadow({ mode: "open" }) im Konstruktor oder in connectedCallback eines benutzerdefinierten Elements auf. Die Methode gibt eine ShadowRoot zurück, die Sie wie einen gewöhnlichen DOM-Baum mit innerHTML, appendChild usw. befüllen können.

mode: "open" stellt den Shadow Tree als element.shadowRoot bereit. mode: "closed" verbirgt ihn – element.shadowRoot gibt null zurück, sodass externe Skripte nicht in den Tree gelangen können. Closed ist in der Praxis selten nützlich, weil derselbe Code, der das Element definiert, ohnehin seine eigene Referenz behalten kann.

Styles, die innerhalb des Shadow Tree definiert werden (über <style> oder adoptierte Stylesheets), gelten nur innerhalb dieses Shadow Tree. CSS-Selektoren im Hauptdokument finden niemals Shadow-Nachfahren, und die Styles des Shadow Tree dringen nicht in das Dokument nach außen.

Innerhalb des Shadow Tree wird das Host-Element (das benutzerdefinierte Element selbst) mit der speziellen :host-Pseudoklasse ausgewählt. :host(.large) trifft zu, wenn der Host die Klasse .large besitzt; :host([disabled]) trifft zu, wenn der Host das disabled-Attribut besitzt.

Benutzerdefinierte Elemente haben standardmäßig display: inline. Wenden Sie innerhalb der Shadow Root :host { display: block } an, damit sich das Element wie eine Komponente auf Blockebene verhält. Wenn Sie dies vergessen, führt das häufig zu Fehlern wie „meine width: 100% wird ignoriert“.

Events, die aus dem Shadow Tree nach außen bubblen, werden am Host retargeted. Ein Klick auf einen inneren Button erreicht äußere Listener mit event.target === host. Verwenden Sie event.composedPath(), um das tatsächliche interne Ziel zu sehen, wenn Sie es benötigen.

Benutzerdefinierte Events, die innerhalb des Shadow Root ausgelöst werden, überschreiten die Grenze nicht, es sei denn, Sie erstellen sie sowohl mit bubbles: true als auch mit composed: true. Ohne composed sehen äußere Listener auf dem Host das Event nie.

Skripte außerhalb können das Host-Element abfragen, aber nicht seine Nachfahren im Shadow Tree. document.querySelector("my-card span") gibt nichts zurück, wenn sich das <span> im Shadow Tree befindet. Die Kapselung schützt interne Details vor unbeabsichtigter Kopplung.

Wenn sich <template shadowrootmode="open"> im HTML eines Elements befindet, erstellt der Browser den Shadow Tree beim Parsen ohne JavaScript. Dadurch eignen sich serverseitig gerenderte Komponenten besser für Hydration, weil der Shadow Tree bereits vorhanden ist, bevor das JavaScript ausgeführt wird.

Jeder Shadow Root verursacht einen gewissen Overhead – einen zusätzlichen Gültigkeitsbereich für Styles und eine zusätzliche Render-Ebene. Hunderte Shadow Roots sind unproblematisch; Zehntausende können relevant werden. Bei sehr dichten UIs, etwa großen Tabellen oder virtualisierten Listen, sollten Sie ein Profiling durchführen, um zu bestätigen, dass die Kosten des Shadow DOM akzeptabel sind.

Was bewirkt der open-Modus, was der closed-Modus nicht bewirkt?

attachShadow({ mode: "open" }) erstellt einen isolierten DOM-Teilbaum, in den CSS und IDs nicht hinein- oder herausgelangen. Stylen Sie den Host mit :host, denken Sie an display: block und verwenden Sie composed: true für Events, die nach außen gelangen müssen. Ansonsten verhält sich der Shadow Tree wie ein regulärer DOM-Teilbaum – innerHTML, appendChild und querySelector funktionieren darin ganz normal.