/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。
