scoped原理、不足、彌補或替代

參考文檔

原理

• 給元素添加惟一屬性（同一組件中全部dom添加的屬性值相同），而後經過屬性選擇器獲取該元素

經過 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下沒法修改組件外樣式（不利於處理第三方組件樣式）

彌補

1. 同時使用 有做用域 和 無做用域 樣式

<style>
/* 無做用域樣式 */
</style>

<style scoped>
/* 有做用域樣式 */
</style>
複製代碼

2. 使用 深度做用選擇器

<style scoped>
.a >>> .b { /* ... */ }
</style>

編譯後

.a[data-v-f3f3eg9] .b { /* ... */ }
複製代碼

• 有些預處理器沒法正確解析 >>> ，可以使用 /deep/ 操做符取而代之

替代

• 可經過 在外層dom添加惟一class 區分不一樣組件，模擬scoped用途