Vue3 scoped样式复制父级data-v属性影响子组件是Bug还是预期行为？

这是 Vue 3 的预期设计行为，不属于框架 Bug。

设计逻辑 #

Vue 的 scoped 样式编译逻辑是：给当前组件内的所有DOM元素打上唯一的data-v-xxxx格式属性标识，同时给当前组件的所有CSS选择器尾部加上对应的属性选择器，以此实现样式的组件级隔离。
官方刻意设计了属性透传规则：父组件的scoped样式唯一标识，会自动继承到其直接引入的子组件的根元素上。这个设计的目的是降低开发成本——父组件如果需要调整直接子组件根节点的样式（比如调整外边距、布局定位），不需要额外使用深度选择器就能直接命中，属于常见开发场景的便捷优化。

现象成因 #

示例中三个组件都配置了scoped样式，且使用了完全相同的.comp类名：

• 每个组件的scoped样式编译后都会变成带自身data-v属性的选择器，比如Comp1的样式会被编译为.comp[data-v-xxxx1] { color: red; }
• Comp2作为Comp1的直接子组件，它的根元素会自动带上Comp1透传的data-v-xxxx1标识，同时自身也带有Comp2自己的scoped标识data-v-xxxx2
• 这就导致Comp2的根元素会同时匹配Comp1的.comp[data-v-xxxx1]选择器，被Comp1的红色样式规则命中；同理Comp3的根元素会被直接父组件Comp2的蓝色样式命中
• 当组件脱离对应父组件的嵌套关系时，不会拿到父组件透传的data-v标识，自然不会被父组件的同名样式影响，样式表现就回归正常。

冲突规避方法 #

如果想要完全避免这类样式串扰，可以选择以下方案：

• 给组件配置多根节点（Fragment 结构）：多根节点组件不会自动继承父组件透传的scoped属性标识
• 从命名规范层面规避，不同组件尽量不使用完全重复的类名
• 注意该透传规则仅生效在直接子组件的根元素上，如果需要修改子组件内部非根节点的样式，仍然需要使用:deep()深度选择器才能命中。

内容的提问来源于stack exchange，提问作者Dalibor Čarapić