慎用vue-scoped属性

概念

在 vue 文件中的 style 标签上，有一个特殊的属性：scoped。当一个 style 标签拥有 scoped 属性时，它的 CSS 样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签全部加上了 scoped，相当于实现了样式的模块化。

穿透

所以当我们使用第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透 scoped。

<style scoped>
  外层class /deep/ 组件class {
  }
</style>

或者再添加一个 style 标签

<style>
  /* 全局 css */
</style>
<style scoped>
  /* 模块 css */
</style>

推荐

任意的没有嵌套的全局样式，都可能会造成全局污染。比较好的做法是：当我们组件内有全局样式需要修改时，可以在根元素上添加一个唯一 class（比如模块-组件名）

<template>
  <div class="module-a-form">
    <el-form>
      <el-form-item>
        <el-input />
      </el-form-item>
      <el-form-item>
        <el-button></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="less" scoped>
  .module-a-form {
    /deep/ .el-form {
      .el-input {
        //
      }
      .el-button {
        //
      }
    }
  }
</style>
<!-- 或者 -->
<style lang="less">
  .module-a-form {
    // 确保了唯一根 class 下，甚至可以不需要 scoped 属性模块化和 /deep/ 穿透了
    .el-input {
      //
    }
    .el-button {
      //
    }
  }
</style>