Fe-interview: [vue] 你知道style加scoped属性的用途和原理吗？

[haizhilin2013]

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

[Antelopeclouds]

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

[xjhhhh]

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

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

[WalkAlone0325]

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

[qq326943819]

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

[Panamer]

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

[Augustccc]

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

[haungxv]

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

[liuxiaoyang1]

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

[Missmisery]

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