一、问题:
公共样式文件中,使用/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值,如下图: