vue样式穿透

1、vue单文件组件作用域

当<style>标签带有scoped attribute 的时候,它的 CSS 只会影响当前组件的元素，和 Shadow DOM 中的样式封装类似。使用时有一些注意事项，不过好处是不需要任何的 polyfill。它的实现方式是通过 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>

2、深度选择器

使用scoped 样式中的选择器如果想要做更“深度”的选择，也就是说需要在父元素中 影响到子组件的样式，可以使用 :deep() 这个伪类、>>>，/deep/，::v-deep

（1）：deep

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

(2)>>>,less、sass预处理器无法解析>>>

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

(3)/deep/,在less预处理器中使用

<style lang='less' scoped>
  /deep/ .b{
      /**/
color:red
   }
</style>

(4)::v-deep,在sass预处理器中使用

<style lang='scss' scoped>
 ::v-deep .b{
      /**/
color:red
   }
</style>