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用途