scoped style 在多节点情况下样式应用失败

[guaijie]

Vue version

3.5.3

Link to minimal reproduction

https://play.vuejs.org/#__PROD__eNp9Uk1v1DAQ/SuDL5uVIu+hcFmyKxWoBBwAUSQullCUTLIujm3ZzrIoyn/v2G6226rqbWbem+83sWtr+XFEtmWVb5y0ATyG0e6FloM1LsAEDjuYoXNmgBVRV2foEw7mIc430YmVCBa6MdoHGHwPu5herD6jUgZ+G6faN6u10NUmd6M+5AQcrKoDkgdQpbKNqr3fCdaSI9h+mlK1ea5SIyJWm4usyof/CsE3xmJLPo9pMMVyjVHGbWmK9r3Qc+ocuXtWskB83cme33mj6QKJL1hjBisVuu82SNpDsG2uFLGa1vj3NcWCG7Fc4s0Bm78vxO/8KcYE++HQozuiYGcs1K7HkOGb2294IvsMDqYdFbFfAX+iN2qMM2bah1G3NPYFL037JT1L6v6XvzkF1H5ZKg4amXPiC0bP+/jK6o/jXvG3KY/uSVdcHv9cQqBq3dMHA5W5lNPo8ToE58to3SoTyGqxkxofupZwWPSWhhKMPveEUaShpD6gkyEV20JXK0/rzGsiZ/nVESABLg2LR8jHthlKEyRoAZP+dlCsYbeHQ0EalEc6Ko3OOc9F5zKXiGkXUn5JyJtsU41kPpGt0HS/P0d08Sd0Pzosv3rH5ns9sTW4

Steps to reproduce

App.vue

<script setup>
import { ref } from 'vue'
import Demo from './Demo.vue'

const msg = ref('Hello World!')
</script>

<template>
  <Demo class="demo">{{ msg }}</Demo>
</template>
<style scoped>
.demo {
  color: red;
}
</style>

Demo.vue

<script setup lang="ts">
import { useAttrs, useSlots, defineOptions, h } from "vue";
defineOptions({
  inheritAttrs: false
});
const attrs = useAttrs();
const slots = useSlots();

const Demo = () => h("div", { ...attrs }, slots);
</script>
<template>
  <Demo />
  <div />
</template>

当 Demo 组件有多个节点时，添加有 scoped 属性的 style 中的样式应用失败，当删除 <div /> 节点时，样式应用成功

What is expected?

无论是单节点组件还是多节点组件，添加有 scoped 属性的 style 中的样式都应该应用成功

What is actually happening?

当是多节点组件时，添加有 scoped 属性的 style 中的样式应用失败

System Info

No response

Any additional comments?

No response

[linzhe141]

https://cn.vuejs.org/api/sfc-css-features.html#child-component-root-elements

根据文档，如果子组件存在根节点，那么根节点才会加父组件的的scopedId，现在是一个fragment，我觉得这种应该是正常行为

[edison1105]

see https://vuejs.org/api/sfc-css-features.html#child-component-root-elements