Shadow DOM è un argomento difficile da comprendere. È solo complicato. Introduce concetti non familiari a cui non siamo abituati sul web. Confini ombreggiati, ambito di stile, retargeting per eventi, punti di inserzione, punti di inserzione ombreggiati, nodi host, nodi distribuiti e così via.
Un aspetto concettualmente impegnativo di Shadow DOM è il modo in cui il prodotto finale (DOM) viene visualizzato dal browser. I nodi del nodo host vengono magicamente spostati nei punti di inserzione di un ShadowRoot, ma rimangono logicamente nel nodo host. Strano. Pertanto, al momento del rendering, vengono visualizzati all'interno dell'albero ombra e non nell'host originale. Il modo in cui avviene questo rendering è uno degli aspetti più confusi di Shadow DOM.
Qualche giorno fa ho rilasciato uno strumento a cui sto lavorando chiamato Shadow DOM Visualizer per contribuire ad abbreviare la curva di apprendimento.
Ti consente di vedere visivamente il rendering di Shadow DOM nel browser, un aspetto che attualmente manca a DevTools. Entrambi i blocchi di codice neri a sinistra sono modificabili. Prova a modificare i punti di inserzione <content>, a rimuoverli o aggiungerne di nuovi per vedere in che modo l'albero composito (visualizzato) viene interessato a destra.
Passa il mouse sopra i nodi del grafico per evidenziare il markup pertinente a sinistra. Evviva d3.js! I nodi blu provengono dal nodo host. I nodi gialli provengono dallo shadow DOM. I punti di inserimento <content> sono il ponte tra i due mondi. Poiché sono logicamente nel DOM ombra, sono colorate di giallo. Il bordo blu indica che invitano i nodi host blu al gruppo di rendering.
Il DOM ombra è disponibile in Chrome 25 e l'elemento <template> è disponibile in Chrome 26 (anche se per provare la demo è sufficiente il primo).