组件域内样式渲染和深度作用选择器

1. 组件域内样式渲染

单文件组件样式 <style> 标签带有 scoped attribute 的时候，它的样式只会应用到当前组件元素上，具体实现是这个可选的 scoped attribute 会自动添加一个唯一的 attribute (比如 data-v-8sdf9s2) 为组件内的 css 指定作用域。

PostCss 转化处理如下：

<style scoped>
.example {
	color: red;
}
</style>

<template>
	<div class="example">hid</div>
</template>

转化为

<style>
.example[data-v-8sdf9s2]{
	color:red;
}
</style>

<template>
	<div class="example" data-v-8sdf9s2>hi</div>
</template>

在带有 scoped 的时候，父组件的样式将不会泄露到子组件当中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这是有意为之的，这样父组件就可以设置子组件根节点的样式，以达到调整布局的目的。

2. 深度作用选择器

当父组件样式标签设置了 scoped ，父组件样式并不会渗透到子组件中，可以通过 深度作用选择器 影响子组件。

vue 2.0 写法

>>> 用法

通过 >>> 操作符实现深度影响子组件样式，例如：

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

编译成

.a[data-v-8sdf9s2] .b { /* style */ }

vue 3.0 写法

3.0 的版本中推荐使用 :deep() 伪类来处理深度样式渲染

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

注意

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

/deep/ 用法

.page /deep/ .child{
	/* style */
}

::v-deep 用法

由于 /deep/ 在 vue 3.0 下报错，请按照官方提供的操作符 ::v-deep 取而代之。

.page ::v-deep .child{
	/* style */
}

另外，规范化的全局样式和模块化的样式处理，可以少用此类深度作用选择器，避免调试麻烦。