移除了 Chrome 63 中的 ::shadow 和 /deep/

Rob Dodson

从 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 时，您才需要进行此更改。

更多信息

移除意图 | Chromestatus 跟踪器 | Chromium bug