目錄
Scoped CSS
當 <style> 標籤有 scoped 屬性時，它的 CSS 只作用於當前組件中的元素。這類似於 Shadow DOM 中的樣式封裝。它有一些注意事項，但不需要任何 polyfill。它通過使用 PostCSS 來實現以下轉換：
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
轉換結果：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
#混用本地和全局樣式
你可以在一個組件中同時使用有 scoped 和非 scoped 樣式：
<style>
/* 全局樣式 */
</style>
<style scoped>
/* 本地樣式 */
</style>
#子組件的根元素
使用 scoped 後，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是爲了讓父組件可以從佈局的角度出發，調整其子組件根元素的樣式。
#深度作用選擇器
如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代碼將會編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }
有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。
#動態生成的內容
通過 v-html 創建的 DOM 內容不受 scoped 樣式影響，但是你仍然可以通過深度作用選擇器來爲他們設置樣式。
#還有一些要留意
-
Scoped 樣式不能代替 class。考慮到瀏覽器渲染各種 CSS 選擇器的方式，當
p { color: red }是 scoped 時 (即與特性選擇器組合使用時) 會慢很多倍。如果你使用 class 或者 id 取而代之，比如.example { color: red }，性能影響就會消除。你可以在這塊試驗田中測試它們的不同。 -
在遞歸組件中小心使用後代選擇器! 對選擇器
.a .b中的 CSS 規則來說，如果匹配.a的元素包含一個遞歸子組件，則所有的子組件中的.b都將被這個規則匹配。