核心内容摘要
超碰在：解锁无限可能，点燃你的激情！
样式穿透组件样式污染的核心原因就是不加scoped的话组件里的CSS选择器都是全局的类名一重复就会互相覆盖。
解决有两种办法一是给组件最外层的顶级元素起唯一类名靠人工保证不重复不过一般不用主流是给style加scoped它的核心原理是编译时做两件事一是给当前组件所有HTML元素还有组件里引入的所有子组件包括UI组件的根标签顶级元素都自动加上唯一的data-v-xxx哈希属性二是给当前组件的所有样式规则也拼接这个哈希属性选择器这样样式就只会匹配带相同哈希的元素哈希几乎不会重复就从根本上避免了样式污染。
也正因为scoped只给子组件的根标签加当前组件的哈希子组件内部的非根元素是它自己编译的不会带当前组件的哈希所以我们用带哈希的样式规则根本匹配不到UI组件这类第三方组件的内部子元素直接写样式就不生效。
这时候就需要用样式穿透Vue
7及以后用:deep()老版本的/deep/已经不兼容了穿透的作用就是让编译器不对穿透后的选择器拼接哈希这样样式就能直接匹配到UI组件内部的子元素实现样式修改。
而且因为scoped会给子组件根标签加哈希所以我们直接修改UI组件的根标签样式不用穿透也能生效这也是scoped的一个设计细节。