样式污染引发的思考：scoped原理

1、用法

scoped是实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。（事实上， scoped是一个boolean值）

2、原理（postcss）

1. 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性

   <style scoped lang="less">
       .example{
           color:red;
       }
   </style>
   <template>
       <div class="example">scoped测试案例</div>
   </template>
   

   转译后：

   .example[data-v-5558831a] {
     color: red;
   }
   <template>
       <div class="example" data-v-5558831a>scoped测试案例</div>
   </template>
   

2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式

3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性（注：这就会带来其他影响）

这里的样式无效是在父组件中更改子组件的样式

3、样式穿透

当我们引入第三方组件库时，需要在局部组件中修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。

• 在 stylus中使用 >>>

    .wrapper >>> .swiper-pagination-bullet-active
      background: #fff
  

• 在sass和less中使用 /deep/或 ::v-deep （预编译器会不支持>>>）

• 改变app外层div的样式 如 body

  因为scope的原因，我们在组件内部的style里是改变不了app外层的div的样式，如body。
  如果我们要改变body，我们可以在mount阶段给body添加clas，来改变样式

  <style lang="less" scoped>
  .body{
      body{
          background-color:red;
      }
  }
  </style>
  document.body.classList.add()
  

  为了不影响其他页面的全局样式，我们可以在离开该组件，在beforeDestroy时，删除该class

  beforeDestroy(){
  document.body.classList.remove()
  }