1.组件作用域 CSS
当 <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 后，父组件的样式将不会渗透到子组件中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
3.深度选择器
处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
TIP
通过 v-html 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。
4.全局选择器
如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现 (看下面的代码)：
<style scoped>
:global(.red) {
color: red;
}
</style>
5.CSS 中的 v-bind()
单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态：
<script setup>
const theme = {
color: 'red'
}
</script><template>
<p>hello</p>
</template><style scoped>
p {
color: v-bind('theme.color');
}
</style>