Model Shadow DOM jest trudnym tematem. To skomplikowane. Wprowadza ono nieznane pojęcia, których nie używamy w internecie. Granice cienia, zakres stylizacji, kierowanie na użytkowników, którzy kliknęli zdarzenie, punkty wstawiania, punkty wstawiania cienia, węzły hosta, węzły rozproszone...lista terminów jest długa.
Jednym z problemów związanych z Shadow DOM jest sposób, w jaki przeglądarka renderuje końcowy produkt (DOM). Węzły z węzła głównego są magicznie przenoszone do punktów wstawienia ShadowRoot, ale logicznie nadal pozostają w węźle głównym. Dziwne. W momencie renderowania są one widoczne jako część drzewa cieni, a nie oryginalnego hosta. Sposób, w jaki odbywa się renderowanie, jest jednym z najbardziej mylących elementów Shadow DOM.
Kilka dni temu udostępniłem narzędzie, nad którym pracowałem, o nazwie Shadow DOM Visualizer, aby ułatwić naukę.
Pozwala on wizualnie sprawdzić, jak Shadow DOM jest renderowany w przeglądarce, co obecnie nie jest możliwe w narzędziach deweloperskich. Oba czarne bloki kodu po lewej stronie można edytować. Spróbuj zmienić punkty wstawiania <content>, usunąć je lub dodać nowe, aby sprawdzić, jak to wpłynie na drzewo złożone (renderowane) po prawej stronie.
Najedź kursorem na węzły na wykresie, aby wyróżnić odpowiedni znacznik po lewej stronie. Brawo za d3.js! Niebieskie węzły pochodzą z węzła głównego. Żółte węzły pochodzą z modelu Shadow DOM. Punkty wstawiania <content> stanowią pomost między tymi dwoma światami. Ponieważ logicznie znajdują się w Shadow DOM, są oznaczone na żółto. Niebieska ramka wskazuje, że zapraszają niebieskie węzły hosta do party renderowania.
Shadow DOM jest dostępny w Chrome 25, a element <template> – w Chrome 26 (chociaż do wypróbowania wersji demonstracyjnej wystarczy pierwszy z nich).