Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
luosansui opened this issue Jan 12, 2024 · 3 comments · Fixed by #8593
Closed

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

luosansui opened this issue Jan 12, 2024 · 3 comments · Fixed by #8593
Labels
🐞 bug Something isn't working 🔩 p2-edge-case

Comments

@luosansui
Copy link

luosansui commented Jan 12, 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

@nova1751
Copy link

nova1751 commented Jan 12, 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.😊

@luosansui
Copy link
Author

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
Copy link
Member

duplicate of #5203

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working 🔩 p2-edge-case
Projects
None yet
4 participants