scoped的由來

css一直有個令人困擾的作用域問題：即使是模塊化編程下，在對應的模塊的js中import css進來，這個css仍然是全局的。為了避免css樣式之間的污染，vue中引入了scoped這個概念。

在vue文件中的style標簽上，有一個特殊的屬性：scoped。當一個style標簽擁有scoped屬性時，它的CSS樣式就只能作用于當前的組件。通過設置該屬性，使得組件之間的樣式不互相污染。如果一個項目中的所有style標簽全部加上了scoped，相當于實現了樣式的模塊化。

但是這些樣式又是如何實現不相互影響呢？

scoped的原理

vue中的scoped 通過在DOM結構以及css樣式上加唯一不重復的標記:data-v-hash的方式，以保證唯一（而這個工作是由過PostCSS轉譯實現的），達到樣式私有化模塊化的目的。

總結一下scoped三條渲染規則：

給HTML的DOM節點加一個不重復data屬性(形如：data-v-19fca230)來表示他的唯一性 在每句css選擇器的末尾（編譯后的生成的css語句）加一個當前組件的data屬性選擇器（如[data-v-19fca230]）來私有化樣式 如果組件內部包含有其他組件，只會給其他組件的最外層標簽加上當前組件的data屬性

上個栗子。轉譯前：

<style lang="scss" scoped>  .test {    background: blue;    span{      color:red;    }  }</style><template>  <div class="test">    <span>hello world !</span>  </div></template>

轉譯后：

<style lang="css">  .test[data-v-ff86ae42] {    background: blue;  }  .test span[data-v-ff86ae42]{    color: red;  }</style><template>  <div class="test" data-v-ff86ae42>    <span data-v-ff86ae42>hello world !</span>  </div></template>

可以看出：PostCSS會給一個組件中的所有dom添加了一個獨一無二的動態屬性data-v-xxxx，然后，給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中dom，這種做法使得樣式只作用于含有該屬性的dom——組件內部dom, 從而達到了'樣式模塊化'的效果.

穿透scoped

但是，在做項目中，會遇到這么一個問題，即：引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。那么有哪些解決辦法呢？

不使用scoped 省略（個人不推薦） 在模板中使用兩次style標簽：

<style lang="scss">  /*添加要覆蓋的樣式*/</style><style lang="scss" scoped>  /* local styles */</style><!--vue官網中提到：一個 .vue 文件可以包含多個style標簽。所以上面的寫法是沒有問題的。-->

穿透scoped >>>

<template> <div class="box">  <dialog></dialog> </div></template><!--使用 >>>或者 /deep/ 操作符（Sass 之類的預處理器無法正確解析 >>>，可以使用/deep/）--><style lang="scss" scoped>.box { /deep/ input {  width: 166px;  text-align: center; }}</style>或者<style lang="scss" scoped>.box >>> input {  width: 166px;  text-align: center; }}</style>