【CSS】scoped

定义

当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。

通过该属性，可使组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

实现原理

实现原理是给dom添加了一个独一无二的动态属性data-v-xxxxxxxx

而在对应css选择器后额外添加了一个对应属性选择器来选择

.example[data-v-xxxxxxxx] {  }

穿透scoped

在引用第三方组件时，在项目开发过程中要修改第三方组件的样式，又要实现样式模块化，需要通过穿透

<style scoped>
    外层 >>> 第三方组件 {
        样式
    }
</style>

在sass和less的穿透使用/deep/

<style scoped>
    外层 /deep/ 第三方组件 {
        样式
    }
</style>

这种情况还有一种解决方案是定义一个vue没有scoped，其内的样式就适用全局