Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Chrome 63将删除::shadow 和 /deep/

在Chrome63之后,你将无法使用shadow-piercing 选择器, ::shadow/deep/ 来设计(style) shadow root里面的内容。

  • /deep/ 组合者(combinator)将会成为后代选择器。 x-foo /deep/ div 将会当成 x-foo div.
  • ::shadow 伪元素(pseudo-element)将不会匹配任何元素。

决定删除::shadow 和 /deep/ 的原因

::shadow/deep/ 已经在Chrome 45被弃用了。这是在2015年4月由Web组件聚会中的全部的出席者决定的。

目前,shadow-piercing选择器的问题是它违反了封装(encapsulation)以及在某些时候组件无法更改组件的内部实施。

CSS Shadow Parts的规范正在被推进为shadow piercing选择器的替代。 Shadow Parts 将会允许组件的开发者公开指定的元素。这将会保留封装(encapsulation) 并允许网页的开发者可以一次过设计(style)多个属性。

如果我的网页使用了::shadow and /deep/我应该要怎样呢?

::shadow/deep/ 选择器只会影响旧版的Shadow DOM v0组件。如果您已使用Shadow DOM v1,您不必为您的网页更改任何东西。

您可以使用Chrome Canary来确认您的网站不会因这更新而导致故障。如果你发现了问题,您可以尝试删除代码中所有的::shadow/deep/。如果删除这些选择器对您来说太复杂,您可以尝试考虑用shady DOM polyfill来代替native shadow DOM。如果你的网页正在使用native shadow DOM v0,你才要需要做这个改变。

Translated by