/deep/在chrome89+中出现样式混乱的问题

问题描述

elementui-admin项目中使用/deep/在chrome89+中出现样式混乱的问题

公共样式文件中，使用/deep/，在main.js中引用，chrome89版本以下生效。chrome89+ /deep/选择器失效，导致样式错乱，覆盖的样式失效。

问题分析

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，你才要需要做这个改变。

解决方法

直接在公共样式中去掉/deep/即可。另外在单独的vue文件中，使用/deep/是可以的，单个vue文件使用scoped。

备注

https://developers.google.cn/web/updates/2017/10/remove-shadow-piercing?hl=zh-cn#%E5%A6%82%E6%9E%9C%E6%88%91%E7%9A%84%E7%BD%91%E9%A1%B5%E4%BD%BF%E7%94%A8%E4%BA%86shadow_and_deep%E6%88%91%E5%BA%94%E8%AF%A5%E8%A6%81%E6%80%8E%E6%A0%B7%E5%91%A2