【发布时间】:2017-09-02 08:38:40
【问题描述】:
我的应用程序能够渲染 Shadow DOM,但检查器无法显示影子根。谁能帮我解决这个问题?
【问题讨论】:
标签: mobile-safari web-component shadow-dom safari-web-inspector
我的应用程序能够渲染 Shadow DOM,但检查器无法显示影子根。谁能帮我解决这个问题?
【问题讨论】:
标签: mobile-safari web-component shadow-dom safari-web-inspector
这取决于您指的是哪个 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 年 7 月 31 日更新:影子根不再隐藏在 Safari Web Inspector 中,而是始终显示,无论如何。见https://trac.webkit.org/changeset/253706/webkit/
在旧版本的 Safari 中,Web Inspector 默认不显示阴影根,需要单击一个按钮才能显示阴影根;它看起来像这样:
【讨论】: