如何理解 vue 中 style 的 scope 属性

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

缺点：
（1）由于只是通过属性限制，类还是原来的类，所以在其他地方对类设置样式还是可以造成污染。
（2）添加了属性选择器，对于CSS选择器的权重加重了。
（3）外层组件包裹子组件，会给子组件的根节点添加data属性。在外层组件中无法修改子组件中除了根节点以外的节点的样式。比如子组件中有box类，在父节点中设置样式，会被编译为

.box[data-v-x]

的形式，但是box类所在的节点上没有添加data属性，因此无法修改样式。

那么当我们使用了一个外部框架,同时又给 style 添加了 scope 属性,如何修改外部框架的样式呢?

可以使用/deep/或者>>>穿透CSS，这样外层组件设置的box类编译后的就为[data-v-x] .box了，就可以进行修改。

例如:

/deep/ .el-table .red-row {

    background: #ffc2c2;

}

.el-table >>> .red-row {

    background: #ffc2c2;

}

但是要注意:
sass注意要用 /deep/ ,而无法使用 >>> 这个符号。

参考链接:https://github.com/haizlin/fe...