Shadow DOM is een moeilijk onderwerp om je hoofd omheen te wikkelen. Het is gewoon ingewikkeld. Het introduceert onbekende concepten die we niet gewend zijn op internet. Schaduwgrenzen, stylingscoping, retargeting van gebeurtenissen, invoegpunten, schaduwinvoegpunten, hostknooppunten, gedistribueerde knooppunten,... het jargon gaat maar door.
Eén ding dat conceptueel belastend is voor Shadow DOM is de manier waarop uw eindproduct (DOM) door de browser wordt weergegeven. Knooppunten van het hostknooppunt worden op magische wijze naar de invoegpunten van een ShadowRoot geschoven, maar blijven logischerwijs nog steeds in het hostknooppunt. Vreemd! Dus tijdens het renderen verschijnen ze als onderdeel van de schaduwboom en niet als de oorspronkelijke host. Hoe deze weergave plaatsvindt, is een van de meest verwarrende delen van Shadow DOM.
Een paar dagen geleden heb ik een tool uitgebracht waaraan ik heb gewerkt, genaamd Shadow DOM Visualizer, om de leercurve te helpen verminderen.
Hiermee kun je visueel zien hoe Shadow DOM in de browser wordt weergegeven, iets wat DevTools tegenwoordig mist. Beide zwarte codeblokken aan de linkerkant zijn bewerkbaar. Probeer de <content> invoegpunten te wijzigen, te verwijderen of nieuwe toe te voegen om te zien hoe de samengestelde (gerenderde) boom aan de rechterkant wordt beïnvloed.
Beweeg de muis over de knooppunten in de grafiek om de relevante opmaak aan de linkerkant te markeren. Yay voor d3.js ! Blauwe knooppunten komen van het hostknooppunt. Gele knooppunten komen uit de Shadow DOM. <content> invoegpunten vormen de brug tussen de twee werelden. Omdat ze logischerwijs in de Shadow DOM zitten, zijn ze geel gekleurd. Hun blauwe rand geeft aan dat ze blauwe hostknooppunten uitnodigen voor de renderende partij.
Shadow DOM is beschikbaar in Chrome 25 en het <template> element is beschikbaar in Chrome 26 (hoewel je alleen de eerste nodig hebt om de demo te proberen).