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

陰影 DOM 是難以帶頭討論的主題。這實在太複雜了這將介紹不在網路上不會用到的陌生概念。陰影界線、限定範圍樣式、事件指定舊訪客、插入點、陰影插入點、主機節點、分散式節點等,還有各種術語。

ShadowDom 示範
展示模式

從概念上來說,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> 元素 (不過你只需要搶先體驗此試用版)。