關於 Vue 中 Scoped CSS 的理解

當 style 標籤有 scoped 屬性時，它的 CSS 只作用於當前組件中的元素。這類似於 Shadow DOM 中的樣式封裝。它有一些注意事項，但不需要任何 polyfill。它通過使用 PostCSS 來實現以下轉換：

<style scoped>
.example {
  color: red;
}
</style>
<template>
  <div>hi</div>
</template>

轉換結果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
<template>
  <div 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 都將被這個規則匹配。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/lewYCRsFcccxHs9X7ra65Q

猜你喜歡