原理
- 给元素添加唯一属性(同一组件中所有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下无法修改组件外样式(不利于处理第三方组件样式)
弥补
- 同时使用 有作用域 和 无作用域 样式
<style>
/* 无作用域样式 */
</style>
<style scoped>
/* 有作用域样式 */
</style>
复制代码
- 使用 深度作用选择器
<style scoped>
.a >>> .b { /* ... */ }
</style>
编译后
.a[data-v-f3f3eg9] .b { /* ... */ }
复制代码
- 有些预处理器无法正确解析 >>> ,可使用 /deep/ 操作符取而代之
替代
- 可通过 在外层dom添加唯一class 区分不同组件,模拟scoped用途