Vue scoped

何为Scoped CSS

在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时，它的css只作用于当前组件中的元素。这样就可以使组件的样式不相互污染。它通过使用PostCSS来实现以下转换：

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

PostCSS给一个组件中的所有dom添加了一个独一无二的属性，给css选择器额外添加了一个对应的属性选择器，来选择组件中的dom，这种做法使得样式只作用于含有该属性的dom元素。

总结为： scoped的渲染规则为：

1.给html的dom节点添加一个不重复的data属性（如： data-vf3f3eg9）来标识这个dom元素；

2.在编译后生成的css选择器的末尾加上一个当前选中元素的data属性（如： [data-vf3f3eg9]）来私有化样式。

scoped穿透

有时我们引入第三方组件时，需要在局部组件中修改第三方组件的样式（即你希望 scoped 样式中的一个选择器能够作用得“更深”），例如影响子组件，但又不想去除scoped属性造成组件之间的样式覆盖。这时你可以使用 >>> 操作符来实现穿透scoped：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上面代码会编译为：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作 。

还有其他方式来修改引入第三方组件的样式：

1. 不适用scoped属性；

2. 混用本地和全局样式，在一个组件中同时使用有scoped和非scoped样式；

   <style>
   /* 全局样式 */
   </style>
   
   <style scoped>
   /* 本地样式 */
   </style>

    

参考资料： Vue Loader ---Scoped CSS

Vue中的scoped和scoped穿透