Subscribe on changes!

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

avatar
Jan 12th 2024

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

avatar
Jan 12th 2024

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.😊

avatar
Jan 12th 2024

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>