Vue3 + Vite中多根节点子组件无法通过父组件作用域样式设置样式的问题咨询

嘿，我之前在Vue3里处理多根组件时也遇到过一模一样的问题！让我给你拆解下原因，再提供几个靠谱的解决方案：

首先说下为啥会这样：当子组件是多根节点时，Vue不会自动把父组件传递的属性（包括你加的hello类）绑定到子组件的任意根节点上；再加上Scoped样式的作用域隔离机制，父组件的样式选择器会带上专属的data属性（比如.hello[data-v-xxxxxx]），但子组件的节点没有这个属性，自然就匹配不上了。

方案一：用深度选择器突破Scoped隔离（最省心） #

你的子组件已经给<main>绑定了v-bind="$attrs"，这意味着父组件的hello类已经被传递到<main>节点上了，只是Scoped样式的隔离导致样式没生效。你只需要修改父组件的样式，用Vue的深度选择器:deep()来穿透隔离：

<!-- 父组件修改后的style部分 -->
<style scoped>
:deep(.hello) { 
  display: none; 
}
</style>

这样样式就会穿透到子组件内部，精准命中带有hello类的<main>节点。

方案二：子组件显式接收Class并绑定到目标节点 #

如果你不想用深度选择器，可以让子组件显式声明接收class属性，然后手动绑定到你需要的根节点上：

<!-- 子组件HelloWorld.vue修改后 -->
<script setup>
// 显式定义接收class属性
defineProps(['class'])
</script>
<template>
  <!-- 可以选择给单个或多个根节点绑定class -->
  <header :class="class"></header>
  <main :class="class"></main>
</template>

这种方式下，子组件的节点会带上父组件Scoped样式的专属data属性，父组件原来的样式就能正常生效了。

方案三：把子组件改成单根节点（最简单，看业务场景） #

如果你的业务逻辑允许给子组件套一层容器，改成单根节点是最省事的办法——Vue会自动把父组件传递的class和其他属性绑定到根节点上，父组件的Scoped样式直接就能生效：

<!-- 子组件HelloWorld.vue修改后 -->
<template>
  <div>
    <header></header>
    <main></main>
  </div>
</template>

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