vue組件的style標籤裏的scoped屬性是什麼做用？

<style lang="css" scoped>
.container {
  color: red
}
</style>

開發一個項目會有多個css樣式，全局的局部的，組件內的……各個組件之間可能會存在選擇器重名的問題，一不當心可能會致使樣式污染而使得項目的表現出現問題。而「scoped」這個屬性就是爲了使樣式私有化，不至於讓當前組件的css樣式對全局形成污染。

scoped修飾的style只給當前組件的元素使用，是如何實現的呢？

原理是給渲染後的DOM元素增長一個惟一標誌，相似於「data-v-123lsdfast23」，在css選擇器上也有一個對應的相同標誌，間接提高了樣式的權重，使得樣式更不容易被覆蓋。

可是，這也會產生一些麻煩，scoped屬性標誌只能做用於DOM元素的最外層標籤，因此父組件的樣式不會滲透到子組件中去，能夠使用scoped穿透來解決這個問題：

/* 寫法一，container爲外層屬性選擇器名稱，沒有也能夠不加 */
.container /deep/ .button {
    color: red;
}

/* 寫法二，可用於stylus */

.container >>> .button { color: red; }

還學習到一種方案是將全局屬性和局部屬性分開處理，即：

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

另外，動態生成的DOM類名可能在scoped中也不會有做用，這時可添加 /deep/ 來讓樣式生效。