Das sogenannte Shadow DOM ist ein schwieriges Thema. Es ist einfach komplex. Darin werden unbekannte Konzepte vorgestellt, an die wir im Web nicht gewöhnt sind. Schattengrenzen, Gestaltungsbereiche, Retargeting von Ereignissen, Einfügungspunkte, Schatteneinfügungspunkte, Hostknoten, verteilte Knoten usw.
Ein Schatten-DOM ist konzeptionell besonders beunruhigend, wenn es darum geht, wie Ihr Endprodukt (DOM) vom Browser gerendert wird. Knoten vom Hostknoten werden automatisch zu den Einfügepunkten eines ShadowRoot verschoben, verbleiben aber logisch auf dem Hostknoten. Seltsam! Bei der Renderingzeit werden sie also als Teil des Schattenbaums und nicht als Teil des ursprünglichen Hosts angezeigt. Die Art und Weise, wie dieses Rendering erfolgt, ist einer der verwirrendsten Teile des Shadow DOM.
Vor einigen Tagen habe ich ein Tool namens Shadow DOM Visualizer veröffentlicht, an dem ich bisher gearbeitet habe, um die Lernkurve zu verringern.
Sie können damit visuell sehen, wie Shadow DOM im Browser gerendert wird, was den Entwicklertools heute fehlt. Die beiden schwarzen Codeblöcke auf der linken Seite können bearbeitet werden. Ändern Sie die <content>-Einfügungspunkte oder entfernen Sie neue oder fügen Sie neue hinzu, um zu sehen, wie sich dies auf die zusammengesetzte (gerenderte) Struktur auf der rechten Seite auswirkt.
Bewegen Sie den Mauszeiger über die Knoten in der Grafik, um das relevante Markup auf der linken Seite hervorzuheben. Hurra für d3.js! Blaue Knoten kommen vom Hostknoten. Gelbe Knoten stammen aus dem Shadow-DOM. <content>-Einfügepunkte sind die Brücke zwischen den beiden Welten. Da sie sich logisch im Shadow DOM befinden, sind sie gelb eingefärbt. Der blaue Rahmen bedeutet, dass sie blaue Hostknoten zur Rendering-Gruppe einladen.
Shadow DOM ist in Chrome 25 verfügbar und das <template>-Element ist in Chrome 26 verfügbar. Sie brauchen jedoch nur das erste Element, um die Demo auszuprobieren.