Scoped CSS 的 descendant, child selectors 优先级

[Lingjun Meng]

输入

<style scoped>
.a .b .c {
    color: red
}
</style>

输出

1. 向下兼容

.a[913ce72] .b .c {
    color: red
}

场景： slot 与 第三方库

.container[913ce72] .slick-list {}

2. 向上兼容

.a .b .c[913ce72] {
    color: red
}

场景：全局主题

.theme-blue .button[913ce72] {}

问题

1 和 2 需要做一个选择, 收集大家的建议

或者，有更优的方案？

[GU Yiling]

选 2 吧，2 是精确匹配当前组件。1 的话会污染 DOM 下所有组件。总得来说就看我们的组件方案是更接近 Web Components 还是更接近于普通的 DOM 了吧。