你知道style加scoped属性的用途和原理吗？

Answer 1

用途：防止全局同名CSS污染
原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式

Answer 2

让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分.
这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域

Answer 3

一、scoped会在元素上添加唯一的属性（data-v-x形式），css编译后也会加上属性选择器，从而达到限制作用域的目的。
缺点：
（1）由于只是通过属性限制，类还是原来的类，所以在其他地方对类设置样式还是可以造成污染。
（2）添加了属性选择器，对于CSS选择器的权重加重了。
（3）外层组件包裹子组件，会给子组件的根节点添加data属性。在外层组件中无法修改子组件中除了根节点以外的节点的样式。比如子组件中有box类，在父节点中设置样式，会被编译为
.box[data-v-x]的形式，但是box类所在的节点上没有添加data属性，因此无法修改样式。
可以使用/deep/或者>>>穿透CSS，这样外层组件设置的box类编译后的就为[data-v-x] .box了，就可以进行修改。
二、可以使用CSS Module
CSS Module没有添加唯一属性，而是通过修改类名限制作用域。这样类发生了变化，在其他地方设置样式无法造成污染，也没有使CSS选择器的权重增加。

Answer 4

在标签上绑定了自定义属性，防止css全局污染
但是很多时候使用ui框架如果加scope就不能覆盖，这个时候一般写sass 会在最外层包裹该组件名的id 就可以不使用scoped 了

Answer 5

在标签上绑定了自定义属性，防止css全局污染
但是很多时候使用ui框架如果加scope就不能覆盖，这个时候一般写sass 会在最外层包裹该组件名的id 就可以不使用scoped 了

是的，不过用/deep/也可以对组件内的样式进行覆盖