Zusammenfassung

  • Der erste öffentliche W3C-Entwurf vom Mai 2012 behandelte funktionale Grenzen zwischen DOM-Teilbäumen. Der Entwurf von 2014 rückte ihre Zusammensetzung nach vorn; eine Note von 2018 verzeichnete die Übernahme der Inhalte in DOM, HTML, CSS Scoping und UI Events.
  • Nach dem heutigen DOM-Standard lassen sich gewöhnliche Kinder des Seitenelements Slots im Shadow Tree zuweisen. Ihr DOM-Elternknoten bleibt erhalten. CSS bietet mit :host, ::slotted und ::part gezielte Berührungspunkte.

Man nehme eine Nachrichtenkarte. Die Entwickler der Karte gestalten Knopf und Rahmen; die Redaktion liefert Foto und Titel. Auf der Website wartet bereits ein umfangreiches Stylesheet, das Buttons am liebsten grellgrün sieht. Lässt man alle Regeln ungehindert ins Karteninnere, ist die Gestaltung verloren. Sperrt man die Karte ganz ab, steht die Redaktion mit dem Foto vor verschlossener Tür. Die brauchbare Lösung musste Zutritt regeln.

Der erste öffentliche Shadow-DOM-Arbeitsentwurf des W3C vom 22. Mai 2012 beschrieb funktionale Grenzen zwischen Teilbäumen innerhalb eines Dokuments. Eine Komponente sollte eine eigene innere Struktur haben und trotzdem zur Seite gehören. Der Arbeitsentwurf vom 17. Juni 2014 stellte die Zusammensetzung mehrerer Bäume zu einer sichtbaren Hierarchie stärker heraus. Beide Texte zeigen, welche Fragen die Konstrukteure damals beantworten wollten.

Später verteilte sich die Beschreibung auf mehrere Regelwerke. Die W3C-Note vom 1. März 2018 hält fest, dass Shadow-DOM-Inhalte in DOM, HTML, CSS Scoping und UI Events eingearbeitet wurden. Für Baumstruktur, Darstellung und Ereignisse gab es nun jeweils einen Platz in den grundlegenden Plattformtexten. Der Umzug der Regeln machte das Thema größer, nicht kleiner.

Im heutigen DOM Living Standard der WHATWG ist ein Seitenelement der Host für eine Shadow Root und ihren inneren Baum. Die Seite kann dem Host weiterhin gewöhnliche Kindknoten geben; sie gehören zum Light Tree. Im Shadow Tree können Slots auf solche Kinder warten. Eine Zuweisung setzt sie an einen Platz in der zusammengesetzten Darstellung. Das Foto erscheint dann oben in der Karte, bleibt im zugrunde liegenden DOM-Knotenbaum jedoch Kind des Seitenelements. Der Sitzplatz ändert sich, die Anschrift bleibt.

Diese Trennung ist beim Untersuchen einer Seite entscheidend. Auf dem Bildschirm können Foto und Knopf nebeneinander liegen, obwohl sie aus verschiedenen Bäumen stammen. Für einen leeren Slot kann die Komponente Ersatzinhalt vorsehen. Wer nur der optischen Anordnung folgt, verwechselt leicht Darstellung und Elternbeziehung. Wer zuerst die Herkunft der Knoten prüft, versteht viele scheinbar rätselhafte Selektor-Ergebnisse.

Die Stilgrenze behandelt der Editorenentwurf CSS Shadow Module Level 1 der CSSWG. Allgemeine Selektoren der äußeren Seite laufen nicht einfach durch die Shadow Root zu jedem inneren Element. Bewusst eingerichtete Zugänge bleiben möglich: :host spricht den Host aus den Komponentenstilen an, ::slotted erfasst zugewiesene Inhalte in festgelegtem Rahmen, und ::part gibt einem freigegebenen inneren Element einen Namen für äußere Gestaltung. Eine Komponente kann ihren Türgriff anbieten, ohne gleich alle Schubladen auszuliefern.

Der CSS-Text ist ein Editorentwurf und beschreibt hier die vorgesehenen Mechanismen. Für die zeitliche Abfolge stehen die W3C-Dokumente von 2012, 2014 und 2018. Zusammen erzählen die Originale von einer Aufteilung der Arbeit: Die Seite bringt Inhalt, die Komponente bestimmt Plätze und freigegebene Oberflächen, der Browser fügt das sichtbare Ergebnis zusammen.