Scoped CSS
當(dāng)?<style>?標(biāo)簽有?scoped?屬性時(shí)橄唬，它的 CSS 只作用于當(dāng)前組件中的元素。這類似于 Shadow DOM 中的樣式封裝蚀狰。它有一些注意事項(xiàng)手销，但不需要任何 polyfill。它通過(guò)使用 PostCSS 來(lái)實(shí)現(xiàn)以下轉(zhuǎn)換：
混用本地和全局樣式
如果你希望?scoped?樣式中的一個(gè)選擇器能夠作用得“更深”访诱，例如影響子組件垫挨，你可以使用?>>>?操作符：
<styles scoped>
? ?.a >>> .b{/* ... */}
</style>
上述代碼會(huì)被編譯成為?
.a[data-v-f3f3eg9] .b{/* ... */}
有些像 Sass 之類的預(yù)處理器無(wú)法正確解析?>>>，這種情況下你可以使用?/deep/?操作符取而代之——這是一個(gè)?>>>?的別名触菜，同樣可以正常工作九榔。
.parent >>> .children{/* ... */ }的效果等同 .parent /deep/ .children{/* ... */}
Scoped 樣式不能代替 class∥邢啵考慮到瀏覽器渲染各種 CSS 選擇器的方式哲泊，當(dāng)?p { color: red }?是 scoped 時(shí) (即與特性選擇器組合使用時(shí)) 會(huì)慢很多倍。如果你使用 class 或者 id 取而代之催蝗，比如?.example { color: red }切威，性能影響就會(huì)消除。
在遞歸組件中小心使用后代選擇器!?對(duì)選擇器?.a .b?中的 CSS 規(guī)則來(lái)說(shuō)丙号，如果匹配?.a?的元素包含一個(gè)遞歸子組件牢屋，則所有的子組件中的?.b?都將被這個(gè)規(guī)則匹配。
