Shadow DOM è un argomento difficile da comprendere. È solo una questione complessa. Introduce concetti sconosciuti a cui non siamo abituati sul web. Confini delle ombre, ambito degli stili, retargeting degli eventi, punti di inserimento, punti di inserimento delle ombre, nodi host, nodi distribuiti e così via.
Una cosa che concettualmente tassa lo shadow DOM è il modo in cui il browser visualizza il prodotto finale (DOM). I nodi del nodo host vengono spostati magicamente nei punti di inserzione di ShadowRoot, ma logicamente rimangono nel nodo host. Strano! Quindi, al momento del rendering, vengono visualizzati come parte dell'albero delle ombre e non come parte dell'host originale. La modalità di esecuzione di questo rendering è uno degli elementi più confusi di Shadow DOM.
Qualche giorno fa ho rilasciato uno strumento su cui stavo lavorando chiamato Shadow DOM Visualizer per aiutare a ridurre la curva di apprendimento.
Consente di vedere visivamente come viene eseguito il rendering di Shadow DOM nel browser, una cosa che oggi manca a DevTools. Entrambi i blocchi di codice nero sulla sinistra sono modificabili. Prova a modificare <content> punti di inserzione, a rimuoverne o ad aggiungerne di nuovi per vedere l'effetto sull'albero composito (renderizzato) a destra.
Passa il mouse sui nodi del grafico per evidenziare il markup pertinente a sinistra. Evviva per d3.js! Dal nodo host provengono dei nodi blu. I nodi gialli provengono dal DOM shadow. <content> punti di inserzione sono il ponte tra i due mondi. Poiché sono logicamente nel DOM di Shadow, sono di colore giallo. Il bordo blu indica che invitano i nodi host blu nella parte di rendering.
Shadow DOM è disponibile in Chrome 25, mentre l'elemento <template> è disponibile in Chrome 26 (anche se è necessario solo il primo per provare la demo).