CSS作用域

当一个<style>标签具有scoped属性时，它的CSS将只应用于当前组件的元素。这类似于Shadow DOM中的样式封装。 它有一些注意事项，但不需要任何polyfills。它通过使用PostCSS来实现以下转换：

  1. <style scoped>
  2. .example {
  3.   color: red;
  4. }
  5. </style>
  7. <template>
  8.   <div class="example">hi</div>
  9. </template>

编译成如下代码：

  1. <style>
  2. .example[_v-f3f3eg9] {
  3.   color: red;
  4. }
  5. </style>
  7. <template>
  8.   <div class="example" _v-f3f3eg9>hi</div>
  9. </template>

注意

  1. 你可以在一个相同的组件里面同时包含作用域与非作用域的样式

    1. <style>
    2. /* 全局样式 */
    3. </style>
    5. <style scoped>
    6. /* 本地样式 */
    7. </style>

  2. 一个子组件的根节点会被父组件的作用域css和该子组件的作用域css同时影响。

  3. 部分不受作用域样式的影响。

  4. 作用域样式不能消除class的需要。由于浏览器呈现各种CSS选择器的方式，p {color：red}在作用域时（即与属性选择器组合时）会慢很多倍。 如果你使用类或id，例如.example {color：red}，那么你几乎可以消除性能损失。 这里是一个试验场，你可以在那里自己测试差异。

  5. 在递归组件中小心使用后代选择器! 对于带有选择器.a .b的CSS规则，如果匹配.a的元素包含一个递归子组件，那么所有`.b’ 子组件将由规则匹配。