Shadow DOM ist ein schwieriges Thema. Es ist nur kompliziert. Es werden unbekannte Konzepte eingeführt, die wir im Web nicht gewohnt sind. Schattengrenzen, Stilbereich, Ereignis-Retargeting, Einfügepunkte, Schatteneinfügepunkte, Hostknoten, verteilte Knoten… die Liste der Fachbegriffe ist endlos.
Eine Sache, die beim Shadow DOM konzeptionell schwierig ist, ist die Art und Weise, wie das Endprodukt (DOM) vom Browser gerendert wird. Knoten aus dem Hostknoten werden magisch in die Einfügepunkte eines ShadowRoots verschoben, bleiben aber logischerweise im Hostknoten. Seltsam! Beim Rendern werden sie daher als Teil des Schattenbaums und nicht des ursprünglichen Hosts angezeigt. Wie dieses Rendering erfolgt, ist einer der verwirrendsten Aspekte von Shadow DOM.
Vor einigen Tagen habe ich ein Tool veröffentlicht, an dem ich gearbeitet habe: Shadow DOM Visualizer. Es soll die Lernkurve verkürzen.
Sie können damit visuell sehen, wie Shadow DOM im Browser gerendert wird, was in den DevTools derzeit nicht möglich ist. Die beiden schwarzen Codeblöcke auf der linken Seite können bearbeitet werden. Ändern Sie die Einfügepunkte <content>, entfernen Sie sie oder fügen Sie neue hinzu, um zu sehen, wie sich das auf den zusammengesetzten (gerenderten) Baum rechts auswirkt.
Bewegen Sie den Mauszeiger auf die Knoten im Diagramm, um das entsprechende Markup auf der linken Seite hervorzuheben. d3.js ist einfach toll! Blaue Knoten stammen 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. Der blaue Rahmen zeigt an, dass sie blaue Hostknoten zur Rendering-Party einladen.
Shadow DOM ist in Chrome 25 und das Element <template> in Chrome 26 verfügbar. Für die Demo benötigen Sie jedoch nur die erste Version.