以視覺化方式呈現 影子 DOM 概念

Shadow DOM 是個難以理解的複雜主題。只是比較複雜。它引入了我們不熟悉的概念，陰影邊界、樣式範圍、事件重新指定、插入點、陰影插入點、主機節點、分散節點...這些專有名詞不勝枚舉。

在概念上，Shadow DOM 最費神的地方，就是瀏覽器如何轉譯最終產品 (DOM)。主機節點的節點會神奇地轉換為 ShadowRoot 的插入點，但在邏輯上仍會保留在主機節點中。真奇怪！因此在轉譯期間，這些元素會顯示為陰影樹的一部分，而非原始主機。這項轉譯作業的執行方式，是 Shadow DOM 最令人困惑的部分之一。

幾天前，我發布了一直在研究的工具，名為「Shadow DOM Visualizer」，可縮短學習曲線。

這項功能可讓您以視覺化方式查看 Shadow DOM 在瀏覽器中的轉譯方式，這也是目前 DevTools 缺少的功能。左側的黑色程式碼區塊皆可編輯。請嘗試變更 <content> 插入點、移除或新增新的插入點，看看會如何影響右側的組合 (算繪) 樹狀結構。

將滑鼠游標懸停在圖表中的節點上，即可在左側醒目顯示相關標記。d3.js 真棒！藍色節點來自主機節點。黃色節點來自 Shadow DOM。<content> 插入點是兩個世界的橋樑。由於這些元素在邏輯上位於 Shadow DOM 中，因此會以黃色標示。藍色邊框表示邀請藍色主機節點加入轉譯群組。

Shadow DOM 可在 Chrome 25 中使用，<template> 元素則可在 Chrome 26 中使用 (不過您只需要前者就能試用這個範例)。