从 Chrome 63 开始,您无法使用阴影穿透选择器 ::shadow
和 /deep/
来设置影子根内的内容样式。
/deep/
组合器将充当后代选择器。x-foo /deep/ div
的工作方式类似于x-foo div
。::shadow
伪元素不会与任何元素匹配。
移除决定
Chrome 版本 45 中废弃了 ::shadow
和 /deep/
。这是由 2015 年 4 月的 Web 组件聚会的所有参与者决定的。
影子穿透选择器的主要问题是,它们违反封装并造成组件无法再更改其内部实现的情况。
作为阴影穿孔选择器的替代方案,我们将进一步完善 CSS 阴影部分规范。阴影部分可让组件作者以保留封装的方式公开命名元素,同时仍然允许页面作者同时设置多个属性的样式。
如果我的网站使用 ::shadow 和 /deep/?
::shadow
和 /deep/
选择器仅影响旧版 Shadow DOM v0 组件。如果您使用的是 Shadow DOM v1,则无需更改网站上的任何内容。
您可以使用 Chrome Canary 来验证您的网站不会因这些新更改而出现问题。如果您发现问题,请尝试并移除对 ::shadow
和 /deep/
的任何使用。如果难以移除这些选择器的使用,请考虑从原生 shadow DOM 切换到可疑的 DOM polyfill。只有当您的网站依赖于原生 shadow DOM v0 时,您才需要进行此更改。