Safari 支持声明式 Shadow DOM

出品|开源中国

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 则正在支持但尚未实现。