陰影 DOM 是難以帶頭討論的主題。這實在太複雜了這將介紹不在網路上不會用到的陌生概念。陰影界線、限定範圍樣式、事件指定舊訪客、插入點、陰影插入點、主機節點、分散式節點等，還有各種術語。
從概念上來說，Shadow DOM 是瀏覽器轉譯最終產品 (DOM) 的方式。在邏輯上，來自主機節點的節點會神奇地滑入 ShadowRoot 的插入點，但在邏輯上仍保留在主機節點中。真奇怪！因此，這類圖片會在轉譯時顯示為陰影樹狀結構的一部分，而非原始主機的一部分。系統如何進行轉譯作業，是 Shadow DOM 的其中一項最令人混淆的部分。
幾天前，我推出了一款名為 Shadow DOM Visualizer 的工具，可以減少學習曲線。
透過這個方式，您可以看到 Shadow DOM 在瀏覽器中的轉譯方式，但開發人員工具現在已經缺少一些功能。左側兩個黑色程式碼區塊都可以編輯。請嘗試變更 <content> 插入點、移除或新增插入點，看看右側的複合式 (已轉譯) 樹狀結構會受到什麼影響。
將滑鼠遊標停在圖表的節點上，即可醒目顯示左側的相關標記。太棒了，獲得 d3.js！藍色節點來自主機節點。黃色節點來自 Shadow DOM。<content> 插入點是兩個世界之間的橋樑。它們在「影子 DOM」在邏輯上運作，因此會顯示為黃色。他們的藍色邊框表示他們邀請藍色的主機節點加入轉譯方。
Chrome 25 版支援 Shadow DOM，而且在 Chrome 26 版中都能使用 <template> 元素 (不過你只需要搶先體驗此試用版)。