出品 | OSC开源社区（ID：oschina2013)
Safari 技术预览版 162 宣布开始支持声明式 Shadow DOM (Declarative Shadow DOM)，并将默认启用，以便开发者在禁用 JavaScript，或采用服务器端渲染技术时，也能使用 Shadow DOM。Shadow DOM 属于 Web Components 中的三个主要技术之一，其他两个技术是自定义元素和 HTML 模板。Web Components 的出现，是为了让开发者创建可在网页上重复使用的自定义小工具和元件，目前 Web Components 的所有技术都已经被整合到 DOM 和 HTML 标准中，被主流浏览器支持。而在声明式 Shadow DOM 的支持上，Chromium 系列浏览器的进度最快，早在 Chromium 90 支持就已开始，Safari 的浏览器引擎 Webkit 则是一直到现在才开始在技术预览版中支持。Webkit 官方解释了必须支持声明式 Shadow DOM 的原因。所谓 Shadow DOM，是为 DOM 树提供一个轻量级封装，因此开发者便可以在元素上创建一个平行的树，该树被称为影子树 (Shadow Tree)，由于影子树与主要文件的 DOM 树分开渲染，能够在不修改主要 DOM 树的前提下，取代该元素的渲染，因此元素功能可以被脚本化和自定义化，而不需要担心和文件的其他部分冲突。Webkit 官方还提到，目前不少网页应用程序会使用服务器端渲染技术，而使用该技术的网站通常会在渲染初期禁用 JavaScript，以减少绘制延迟。随着脚本和相关元素的加载，才会慢慢强化内容互动性。但因为如此，这些网站便无法使用 Shadow DOM，因为 Shadow DOM 使用前提是必须调用 attachShadow ()，而声明式 Shadow DOM 则是通过在 HTML 中，引入 Shadow DOM 上下文的机制，以解决这个问题。Webkit 官方还提到，目前 DOMParser 和 innerHTML 等 JavaScript 解析器 API，都没有默认支持声明式 Shadow DOM，这是避免在现有接受任意模板内容的网站上，产生跨站脚本漏洞。由于声明式 Shadow DOM 能够在禁用 JavaScript，以及采用服务器端渲染的情况下，提供在 HTML 中定义影子树的新方法，因此是一个重要且受开发者高度期待的功能，也备受浏览器开发商关注。主流浏览器 Chrome、Edge 和 Opera 都在 2021 年便已开始支持，Safari 在最近发布的技术预览版中默认启用，Firefox 则正在支持但尚未实现。相关链接：
这里有最新开源资讯、软件更新、技术干货等内容
点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦
