Annotation nodes under the component root will affect “Fallthrough Attributes”

[luosansui]

Vue version

3.4.10

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-gn3drc?file=src%2FApp.vue

Steps to reproduce

You only need to create v-if and v-else structures in the <template> tag under the component root node, then append an annotation under the <template> tag, and add an annotation between if-else, and the Fallthrough Attributes will be lost.

What is expected?

Annotations should not affect Fallthrough Attributes！

What is actually happening?

When using the following structure:

<template>
   <!-- Note 1 -->
   <h1 v-if="false" data-h="1" class="inner-1">{{ msg }}</h1>
   <!-- Note 2 -->
   <h2 v-else data-h="2" class="inner-2">{{ msg }}</h2>
</template>

Fallthrough Attributes will be lost. In my example the passed class "test" is missing
This template tag is under the root node

System Info

No response

Any additional comments?

No response

[nova1751]

Actually, this is caused by the fact that if you insert annotations into the elements with v-if and v-else,this fragment is regarded as multiple nodes, because you should always keep the annotations inside the fragment to make it be in the right position.Thus,in this case, wrap the whole fragment into a single element or use useAttrs to access the attributes explicitly.Hope this can help you.😊

[luosansui]

Actually, this is caused by the fact that if you insert annotations into the elements with v-if and v-else,this fragment is regarded as multiple nodes, because you should always keep the annotations inside the fragment to make it be in the right position.Thus,in this case, wrap the whole fragment into a single element or use useAttrs to access the attributes explicitly.Hope this can help you.😊

However, including annotations in the middle of if-else will not cause any problems. The following structure can work normally.

<template>
   <h1 v-if="false" data-h="1" class="inner-1">{{ msg }}</h1>
   <!-- Note 1 -->
   <!-- Note 2 -->
   <h2 v-else data-h="2" class="inner-2">{{ msg }}</h2>
</template>

[edison1105]

duplicate of #5203