CSS scoped 属性的原理

什么是 scoped？

在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效，使样式互不污染。

如果一个项目中的所有 Vue 组件 style 标签全部加上了 scoped，相当于实现了样式的私有化。

如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样式，而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透 scoped 的方式来解决。

样式冲突解决方案

Scoped CSS与CSS Module是两大解决CSS中不存在模块化缺陷的有效手段，其中使用的Scoped CSS，example的样式被限定在具有data-v-f3f3eg9属性的HTML标签上，从而避免样式冲突，比如

 <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>