/deep/使用的坑

一、问题：
公共样式文件中，使用/deep/，在main.js中引用，chrome89版本以下生效，chrome89 /deep/选择器失效，导致样式错乱，覆盖的样式失效
二、覆盖element-ui 样式的方法

 1、.vue 文件中在scoped中使用/deep/ 或 >>> 或 ::v-deep

 2、.vue文件中 无样式作用域，直接覆盖（不建议，除非定义独有class）

 3、公共样式中，直接覆盖，使用/deep/选择器 在main.js中引入（不规范写法）

 4、公共样式中，直接覆盖，不使用/deep/选择器 在main.js中引入

 5、单独css文件，在使用到的.vue文件中，通过import方式引入，有样式作用域

 6、单独css文件，在使用到的.vue文件中，通过import方式引入，无样式作用域（不建议，除非定义独有class）

针对chrome89以下版本，6种方式均生效，chrome89 以后，第3种方式样式覆盖失效。
原因是：chrome63 已经删除 ::shadow 和 /deep/，但89版本之前还可以使用，因为在chrome89版本中才彻底移除Shadow DOM V0，导致/deep/失效 。
三、写在公共样式中的/deep/，在main.js中引入和在.vue文件中scoped内使用/deep/有什么区别
1、公共样式中使用/deep/，main.js中引入，无任何解析，直接输出/deep/，也就是chrome自身去解析/deep/，chrome的/deep/是对shadow-dom的深度穿透
2、.vue文件scoped中使用/deep/，选择器会被加上hash值，如下图：

image.png