【Vue Style】scoped原理，嵌套情况，v-deep原理

“写vue项目时，style标签应当加scoped，防止样式污染”

这句话，新人在进入vue时，都应该知道这个指导。用了scoped之后，就开始发现，当组件的样式需要调整时就麻烦了，直接写组件样式在scoped里完全不起效果，在vue-admin-template中，发现它是单开一个不带scoped的style标签去影响内部组件。

但是又出现一种情况，不用scoped就可能发生style泄露（可以有意防止，但需要注意），且有时确实只需要改动样式很小时，专门新开一个style就显得不便了。这个时候就用上深度作用选择器

vue-loader.vuejs.org/zh/guide/sc…

sass不能正确解析>>>，dart-sass又无法解析/deep/（issue），那就只剩下::v-deep了。

那::v-deep怎么正确使用呢？那就需要明白使用scoped发生了，::v-deep又改变了什么。

加上scoped发生了什么

这是加scoped后的编译

可以看到，所有样式尾部都加上了[data-v-xxxx] ，相应的vue文件中<template>内所有标签都加上相同的[data-v-xxxx]，而子组件div.si-select-content却不会加上[data-v-xxxx]属性

这样，所有样式目标都指向了当前页面（组件），就实现了完全的样式封闭

::v-deep改变了什么

::v-deep将要改变的组件样式包裹

结果样式的[data-v-xxxx]就放在了::v-deep的上层选择器

把::v-deep当作伪元素更方便一点，如下

（这里可以看到相邻兄弟选择器 A + B出现了解析不正常，使用时要注意）

如果把::v-deep放在.component-body后面，[data-v-xxxx]就会跑到该选择器后面

这样也放大了样式的污染范围，所以要注意。