Vue 3中scoped样式为何能作用于el-button组件？

这是因为Vue2和Vue3在Scoped样式的实现逻辑上有核心差异：

Vue2的Scoped样式逻辑 #

在Vue2里，Scoped样式会给当前组件的所有原生元素添加一个唯一的data-v-xxx属性，同时把样式选择器编译成带这个属性的形式。比如你写的.el-button会被编译成.el-button[data-v-xxx]。

但对于像el-button这类子组件，它的根元素（内部的<button class="el-button">）并不会带上当前组件的data-v-xxx属性——Vue2的Scoped样式只作用于当前组件的元素，不会渗透到子组件的根元素上。所以直接写.el-button根本匹配不到子组件的元素，必须用深度选择器（/deep/ .el-button 或 ::v-deep .el-button）才能生效。

Vue3的Scoped样式逻辑 #

Vue3对Scoped样式做了优化：当你在父组件的Scoped样式中写针对子组件类名的选择器时，Vue3会自动把父组件的data-v-xxx属性添加到子组件的所有根元素上。

回到你的代码，el-button的根元素（内部的button标签）会同时带上自身的el-button类，以及父组件的data-v-xxx属性。此时你写的.el-button会被编译成.el-button[data-v-xxx]，刚好能匹配到子组件的根元素，所以样式就生效了。

简单说就是：Vue3让父组件的Scoped样式可以直接作用于子组件的根元素，不需要额外加深度选择器。

内容的提问来源于stack exchange，提问作者xiaose