Annotation nodes under the component root will affect “Fallthrough Attributes”
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
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.😊
Actually, this is caused by the fact that if you insert annotations into the elements with
v-if
andv-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 useuseAttrs
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>
duplicate of https://github.com/vuejs/core/issues/5203