IOS Safari 是否支持 Shadow DOM？

Question

我的应用程序能够渲染阴影 DOM，但检查器无法显示阴影根。谁能帮我解决这个问题？

Answer 1

这取决于您指的是哪个 Shadow DOM — Shadow DOM v0 或 Shadow DOM v1.

见http://caniuse.com/#feat=shadowdomv1 and http://caniuse.com/#feat=shadowdom

没有版本的 Safari 支持 Shadow DOM v0。但就 iOS Safari 而言，版本 10.2+ 支持 Shadow DOM v1，但有以下限制：

Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.

关于 Shadow DOM v0 和 v1 的区别，参见 https://hayato.io/2016/shadowdomv1/

---

2020-07-31 更新：影子根不再隐藏在 Safari Web Inspector 中——相反，它们现在始终显示，无论如何。参见 https://trac.webkit.org/changeset/253706/webkit/

---

_{在 Web Inspector 默认不显示影子根的旧版本 Safari 中，您需要单击一个按钮才能显示影子根；它看起来像这样：}

_{在检查器 UI 中，它位于选项卡下方右侧的工具栏中。激活后变成蓝色：}