靜态下載之拆解影子：将Shadow DOM轉爲真實的DOM
Shadow DOM
如何将 Shadow DOM (影子DOM) 轉爲 真實DOM？
影子DOM示例
- 下圖這是一個帶有 Shadow DOM 的頁面，頁面含有 #shadow-root 節點，複製整頁代碼時，影子節點代碼並不能複製下來。
拆解影子DOM
- 小飛兔的
錄製下載和靜态下載的内置浏覽器實現了對 Shadow DOM 的拆解轉換
輸出真實DOM
- #shadow-root 轉換爲真實DOM，然後通過靜态下載生成不帶 Shadow DOM 的html代碼。
Shadow DOM 簡介
shadow DOM 消除了構建 Web 應用的脆弱性。這種脆弱性源於 HTML、CSS 和 JS 的全球性質。多年來，我們發明了大量工具來規避這些問題。例如，當您使用新的 HTML id/class 時，無法確定它是否會與網頁使用的現有名稱沖突。細微的 bug 會逐漸出現，CSS 特異性會成爲一個大問題（!important 所有這些！），樣式選擇器會失控，並且性能可能會受到影響。還有更多功能。
Shadow DOM 修複了 CSS 和 DOM。它爲 Web 平台引入了作用域樣式。無需工具或命名慣例，您就可以在原生 JavaScript 中将 CSS 與標記捆綁、隐藏實現細節，以及編寫自包含組件。
Shadow DOM 是 Web Components 的三大標準之一，另外兩個標準是 HTML 模闆、Shadow DOM 和自定義元素。HTML 導入以前屬於此列表，但現在被視爲已廢棄。
您無需編寫使用 shadow DOM 的 Web 組件。不過，當您這樣做時，您可以利用其優勢（CSS 作用域、DOM 封裝、組合）並構建可重複使用的自定義元素，這些元素具有彈性、可高度配置且極易重複使用。如果自定義元素是創建新 HTML 的方法（使用 JS API），Shadow DOM 則是提供其 HTML 和 CSS 的方法。這兩個 API 結合使用可創建包含自包含 HTML、CSS 和 JavaScript 的組件。
Shadow DOM 是一款用於構建基於組件的應用的工具。
隔離的 DOM
- 組件的 DOM 是自包含的（例如，document.querySelector() 不會返回組件 shadow DOM 中的節點）。
受限 CSS
- 在 Shadow DOM 中定義的 CSS 會受限於 Shadow DOM。樣式規則不會洩露，頁面樣式也不會滲透。
組合
- 爲組件設計基於標記的聲明式 API。
簡化 CSS
- 使用作用域 DOM 意味着您可以使用簡單的 CSS 選擇器、更通用的 ID/類名稱，而無需擔心命名沖突。
效率
- 将應用視爲 DOM 的多個部分，而不是一個大型（全局）頁面。