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