从 Chrome 63 开始,您无法使用穿透阴影的选择器 ::shadow
和 /deep/
为阴影根内的元素设置样式。
/deep/
组合元件将用作子孙选择器。x-foo /deep/ div
的运作方式与x-foo div
相同。::shadow
伪元素不会与任何元素匹配。
移除决定
::shadow
和 /deep/
已在 Chrome 45 版中废弃。这是 2015 年 4 月的 Web 组件 Meetup 的所有参与者共同决定的。
与阴影穿透选择器相关的主要问题是,它们会违反封装,并导致组件无法再更改其内部实现。
CSS 阴影部分规范正在完善,以作为阴影穿透选择器的替代方案。借助阴影部分,组件作者可以以保留封装的方式公开命名元素,同时仍允许网页作者一次设置多项属性的样式。
如果我的网站使用 ::shadow 和 /deep/,该怎么办?
::shadow
和 /deep/
选择器仅会影响旧版 Shadow DOM v0 组件。如果您使用的是 Shadow DOM v1,则无需更改网站上的任何内容。
您可以使用 Chrome Canary 版验证您的网站在这些新更改后是否正常运行。如果发现问题,请尝试移除所有 ::shadow
和 /deep/
用法。如果移除这些选择器的使用非常困难,请考虑从原生 Shadow DOM 切换到 shady DOM polyfill。只有当您的网站依赖于原生 shadow DOM v0 时,您才需要进行此更改。