scoped实现原理及穿透方法-526互联

何为 scoped

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

scoped 实现原理

<style scoped>
  .example {
    color: red;
  }
</style>
<template>
  <div class="example">hi</div>
</template>

<style>
  .example[data-v-5558831a] {
    color: red;
  }
</style>
<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

PostCSS 给一个组件中的全部 dom 添加了一个独一无二的动态属性，而后，给 CSS 选择器额外添加一个对应的属性选择器来选择该组件中 dom，这种作法使得样式只做用于含有该属性的 dom——组件内部 domhtml

为何须要穿透 scoped

scoped 看起来很美，可是，在不少项目中，会出现这么一种状况，即：引用了第三方组件，须要在组件中局部修改第三方组件的样式，而又不想去除 scoped 属性形成组件之间的样式污染。此时只能经过特殊的方式，穿透 scoped。vue

白话就是说，好比使用 element-ui 的样式，在 demo.vue 中使用 table 组件，而且 style 上加 scoped，在修改 table 组件里边的样式是不生效的，由于 data-v-009 只加在
子组件的第一层，子组件中其余 dom 是没有 data-v-009 这个属性的，而写在 scoped 中的样式都会被 postcss 添加[data-v-009],样式只做用于有 data-v-009 这个属性的 dom
不管权值多高，甚至添加!important，都没法修改子组件中样式的 element-ui

慎用 scoped

父组件无 scoped 属性，子组件带有 scoped，父组件是没法操做子组件的样式的（缘由在原理中可知），虽然能够在全局中经过该类标签的标签选择器设置样式，但会影响到其余组件
父组件有 scoped 属性，子组件无，父组件也没法设置子组件样式，由于父组件的全部标签都会带有 data-v-469af010 惟一标志，但子组件不会带有这个惟一标志属性，与 1 同理，虽然能够在全局中经过该类标签的标签选择器设置样式，但会影响到其余组件
父子组建都有，同理也没法设置样式，更改起来增长代码量

解决方法

穿透 scoped

注意 stylus 的样式穿透使用>>> sass 和 less 的样式穿透使用/deep/segmentfault

<style scoped>
  /* 外层 >>> 第三方组件 {
  样式
 } */
  /* 使用如下这段没法修改table样式 */
  .el-table__header-wrapper {
    height: 20px;
  }
  /* 穿透以后能够顺利修改element-ui样式 */
  .el-contain-row /deep/ .el-table__header-wrapper {
    height: 20px;
  }
</style>

使用两个 style 标签

<style>
/* 用于修改第三方库的样式 */
</style>

<style scoped>
/* 本身的组件内样式 */
</style>

添加 class

经过在外层 dom 上添加惟一的 class 来区分不一样组件。这种方法既实现了相似于 scoped 的效果，又方便修改各类第三方组件的样式，代码看起来也相对温馨。app

<style>
.my-class {
  color: red;
  /* 全部样式都被包含在my-class中 */
}
</style>
<template>
  <div class="my-class">
    <!-- dom结构 -->
  </div>
</template>