如何为含两个根节点的Vue3子组件指定CSS类？

我基于Vue 3和Vuetify 3实现了一个包含两个根节点的自定义Alert组件，代码如下：

<template>
  <v-alert type="warning" title="Contains button to display dialog" />
  <v-dialog>dialog goes here</v-dialog>
</template>

v-alert组件内包含一个用于切换v-dialog显示状态的按钮。在父组件中，我尝试为该子组件添加CSS类：

<MyAlert class="mb-8" />
<div>Main content goes here</div>

但该操作无效，同时控制台抛出警告：

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes

我清楚问题原因：Vue无法确定该类应作用于哪个根节点。目前的临时方案是给下方的div添加mt-8类，但Alert组件是条件渲染的，需要通过v-if判断是否添加该类，操作繁琐。

请问有没有办法让Vue将传入的类直接作用于内部的v-alert组件？

方案1：手动绑定$attrs到目标组件 #

通过v-bind="$attrs"将父组件传入的所有非Prop属性（包括class）绑定到v-alert上，同时设置inheritAttrs: false禁用Vue的自动属性继承（多根节点场景下自动继承本就无法生效）。

修改后的自定义组件代码：

<template>
  <v-alert 
    type="warning" 
    title="Contains button to display dialog" 
    v-bind="$attrs" 
  />
  <v-dialog>dialog goes here</v-dialog>
</template>

<script setup>
inheritAttrs = false;
</script>

这样父组件传入的mb-8类会直接作用于v-alert，同时不会再触发警告。

方案2：使用单个根节点包裹（可选） #

如果布局允许，可将两个根节点用一个容器（如<div>）包裹，此时Vue会自动将父组件的class应用到这个根容器上。不过该方案可能影响原有布局，若需精准控制样式作用目标，方案1更合适。

示例代码：

<template>
  <div>
    <v-alert type="warning" title="Contains button to display dialog" />
    <v-dialog>dialog goes here</v-dialog>
  </div>
</template>

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