Model cienia DOM to trudny zagadnienie. To po prostu skomplikowane. Przedstawiamy w nim nieznane nam pojęcia, do których nie mamy przyzwyczajenia w internecie. Granice cieni, określanie zakresu stylów, ponowne kierowanie zdarzeń, punkty wstawiania, punkty wstawiania cieni, węzły hosta, węzły rozproszone...
Jedną z rzeczy, które wiążą się z modelem Shadow DOM, jest sposób renderowania przez przeglądarkę ostatecznego produktu (DOM). Węzły z węzła hosta są magicznie zakręcane do punktów wstawiania ShadowRoot, ale logicznie nadal pozostają w węźle hosta. Dziwne! Podczas renderowania są więc widoczne jako część drzewa cieni, a nie pierwotnego hosta. Sposób renderowania to jeden z najbardziej mylących elementów interfejsu Shadow DOM.
Kilka dni temu wydałem narzędzie o nazwie Shadow DOM Visualizer, nad którym pracuję, aby ułatwić naukę.
Umożliwia wizualizację tego, jak model Shadow DOM renderuje się w przeglądarce, czego obecnie brakuje Narzędziom deweloperskim. Edytować można oba czarne bloki kodu po lewej stronie. Spróbuj zmienić punkty wstawiania <content>, usunąć lub dodać nowe, aby zobaczyć, jak wpływa to na skomponowane (wyrenderowane) drzewo po prawej stronie.
Najedź kursorem na węzły na wykresie, aby podświetlić odpowiednie znaczniki po lewej stronie. Brawo dla d3.js! Węzły niebieskie pochodzą z węzła hosta. Żółte węzły pochodzą z modelu Shadow DOM. Punkty wstawiania <content> stanowią most między tymi dwoma światami. Ponieważ są logicznie w modelu Shadow DOM, mają kolor żółty. Niebieskie obramowanie oznacza, że zaprasza on niebieskie węzły hosta do grupy renderowania.
Model Shadow DOM jest dostępny w Chrome 25, a element <template> jest dostępny w Chrome 26 (chociaż do przetestowania wersji demonstracyjnej wystarczy Ci tylko pierwsza wersja).