vue scoped和scoped穿透

        vue文件中的style标签上会有一个特殊属性scoped。当一个style标签拥有scoped属性时，他的css样式只能作用于当前的vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加了scoped属性，相当于完成了样式的模块化。

一、scoped的实现原理

scoped渲染规则：

1、给html的dom节点添加一个不重复的data属性（如：data-v-5558831a）来唯一标识这个dom元素

2、给每句css选择器的末尾加一个当前组件的data属性选择器（如：[data-v-5558831a]）来私有化样式

转译前

<template>
    <div class="example">scoped</div>
</template>
<style scoped>
    .example{
        color:red;
    }
</style>

转译后

<template>
    <div class="example" data-v-5558831a>scoped</div>
</template>

.example[data-v-5558831a] {
  color: red;
}

二、scoped穿透

        在vue项目中，当我们引入第三方插件时，需要在局部组件中修改第三方插件的样式，又不想去掉scoped属性；

1、stylus的样式穿透使用 >>>

外层 >>> 第三方组件{
    样式
}

.wrapper >>> .el-checkbox{
    background:#fff
}

2、sass和less样式穿透使用/deep/

外层 /deep/ 第三方组件{
    样式
}
/deep/ .el-checkbox{
    background:#fff;
}

3、vue-cli3编译时，有时deep的方式会报错或者警告，这时候用第三种

::v-deep .b {
    background:#fff;    
}