mobile-safari - IOS Safari 是否支持 Shadow DOM？

Question

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

Answer 1

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

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

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

某些 CSS 选择器不起作用 ( :host > .local-child) 并且样式化开槽内容 ( ::slotted) 有问题。

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

---

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

---

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

_{在 Inspector UI 中，它位于选项卡右下方的工具栏中。激活时变为蓝色：}