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

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

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

scoped通过属性选择器，从而是每个类名都添加不同的属性，防止项目中出现相同的类名覆盖，造成污染

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

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

在标签上绑定data-v-xxx属性，使得只能控制当前组件的样式，防止CSS样式全局污染

一、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选择器的权重增加。

这里给大家排个坑，这里虽然设置了scoped 如果我们使用bootstrap的话，因为bootstrap是设置的全局属性，可能会有冲突，

scoped属性会让当前组件设定的样式生效的范围限定在当前组件内，原理就是vue会给每个dom节点打上一个data-v-hash值，然后为你的css代码额外添加一个属性选择器

防止CSS样式全局污染,让该组件的样式只在该组件带特定的标识，其他的同名样式不起作用。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset

一、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选择器的权重增加。

这个总结的好到位

他地方对类设置样式还是可以造成污染。

他是 data-v-x和类组合选择器怎么会污染？