在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