静态下载之拆解影子：将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 的多个部分，而不是一个大型（全局）页面。