【Vue基础】关于Vue中CSS的scoped属性作用域与样式穿透

scoped

在了解scoped属性之前，先了解一下Vue（中的插件）在渲染DOM时干了什么。Vue在渲染DOM后会在DOM节点上生成一个随机串data属性，这一属性给了当前组件下的DOM一种唯一标识。

当在style标签中加入scoped属性后，在页面渲染完毕后，style下所有的CSS都会自动转换，在过滤器上添加与DOM相同的data属性值。也就是说，从结果来看，scoped属性让CSS只对当前组件中的元素起作用，防止了CSS全局污染。

要注意，scoped修饰后的CSS过滤器只对编译器中写入的元素起作用（其实就是只作用于当前组件元素）。比如，如果你使用了element组件库，在编译器中写入的是<el-input>，但是在渲染页面后，input元素的类为“el-input__inner”，此时，你在scoped属性的style中写入“.el-input__inner”是无法起到作用的，因为当前组件中并没有类名为el-input__inner的元素。

>>>   /deep/   ::v-deep

那如果我们要修改这类元素该怎么办呢？我们可以去掉scoped属性，这样作用域就不会局限于当前组件了。可是去掉会造成全局样式污染，如何才能既不去掉scoped，又能够修改element元素的样式呢？

一种省事的方法是，scoped属性的style和无属性的style并用。另一种方法是，在scoped属性的style中进行样式穿透。

/deep/和“>>>”的二者作用是一样的，针对于不同的css预处理器——例如sass 不能解析 “>>>”属性——的情况下可以使用/deep/，它是">>>"的别名，原理相同。

注意：样式穿透只能向子级元素穿透，不能向父级元素穿透。

1.>>>

如果项目使用的是css原生项目，可以直接用 >>> 进行穿透。

<style scoped>
/*编译前*/
.a >>> .b { 
 /* ... */
}

/*编译后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>

2./deep/

项目中用到了预处理器scss、sass、less，操作符>>>可能会因为无法编译而报错。此时可以使用 /deep/。
注意：vue-cli3以上版本不可以使用

<style lang="scss" scoped>
/*用法1*/
.a {
 /deep/ .b { 
  /* ... */
 }
} 
/*用法2*/
.a /deep/ .b { 
  /* ... */
 }
</style>

3.::v-deep

如果使用了预处理器，都可以使用 ::v-deep。

<style lang="scss" scoped>
/*用法1*/
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
/*用法2*/
.a ::v-deep .b {
  /* ... */
}
</style>