scoped css

作用域CSS

当<style>标记具有该scoped属性时，其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>

混合本地和全局样式

您可以在同一组件中包含范围和非范围样式：

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

子组件根元素

使用时scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将受父级作用域CSS和子级作用域CSS的影响。这样设计以便父级可以设置子根元素的样式以进行布局。

深度选择器

如果您希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合子：

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

以上将编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。

动态生成的内容

创建的DOM内容v-html不受范围样式的影响，但您仍可以使用深度选择器设置它们的样式