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

Warning of <Transition> with non-element root/multiple children isn't clear #3338

Open
shameleo opened this issue Mar 2, 2021 · 5 comments
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ✨ feature request New feature or request

Comments

@shameleo
Copy link

shameleo commented Mar 2, 2021

Version

3.0.7

Reproduction link

https://jsfiddle.net/7q2gp3L4/

Steps to reproduce

Click "toggle" button

What is expected?

Opacity transition, as slot returns single element

What is actually happening?

Error: "Component inside renders non-element root node that cannot be animated"


This is regression, it worked with ver 3.0.3 and earlier: https://jsfiddle.net/r49yx6pq/
Possible workaround is to make separate components for each case: https://jsfiddle.net/vfk5h1en/, but it would be nice to get rid of it
<keep-alive> simply explains why would I need it, it is not necessary for reproduction

@posva
Copy link
Member

posva commented Mar 2, 2021

You need one element at the root of your container for the transition to apply the classes: https://jsfiddle.net/1ax56d9p/

Maybe we should change the wording in the warning:

Component inside <Transition> renders non-element root node that cannot be animated. 

@shameleo
Copy link
Author

shameleo commented Mar 2, 2021

Yes, I understand this, I thought maybe Vue can check how many elements slot actually returns, because it is always single element in my case. But if not, I'm ok with your workaround. It's strange, though because component have multiple root nodes as well, but Vue handles this and transition on components is allowed.
Anyway, if it should stay as it is warning would be more clear if it emphasize that root node cannot be animaned because it potentially can resolve to multiple elements or something like that.

@HcySunYang
Copy link
Member

Although we can check whether it is a multi-root with a single element node. However, if Transition can work in this case, then the directives and attr fallthrough should also work in this case.

@shameleo
Copy link
Author

shameleo commented Mar 3, 2021

I not sure which policy you are talking about. Vue already has dual handling of similar cases. From docs:

When used on components, custom directive will always apply to component's root node, similarly to non-prop attributes.
Unlike attributes, directives can't be passed to a different element with v-bind="$attrs".
With fragments support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.

The same with attributes.
And, just for reminder, that is regression, it worked with <=3.0.3
However, that is up to you.

@posva posva changed the title Transition stopped working for component which renders slot as root Warning of <Transition> with non-element root/multiple children isn't clear Mar 3, 2021
@posva posva added 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ✨ feature request New feature or request labels Mar 3, 2021
@lizyChy0329
Copy link

vue's multiple root node is very weak, and many situations confuse developers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ✨ feature request New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants