Uniformize the fallthrough attributes handling of Vue built-in components

[ferferga]

• Start Date: 2024-04-26
• Target Major Version: 3.x
• Reference Issues: Suspended component + transition core#5148 (comment)
• Implementation PR: feat: handle fallthrough attributes in built-in components consistently core#11140

Summary

Right now, not all Vue built-in components behave consistently regarding fallthrough attributes. Transition and KeepAlive pass all it's attributes to their inner child, but that's not the case for Suspense, TransitionGroup and Teleport.

The behaviour of all the built-in components regarding this should be uniformized and coherent.

Basic example

Playground reproduction

You can check in this playground how the different built-ins behave regarding fallthrough attributes.

Motivation

Given those components are used as "function wrappers" encapsulating the behaviour that Vue should use to render those components and they're not rendered in the page , I think it makes sense for them to be as "transparent" as possible for the user, instead of being in the middle (intercepting the fallthrough attributes).

Some specific cases (like Transition and TransitionGroup) are already highly reusable across many projects (see the linked issue) and it's really useful to use them as wrappers for classes (common properties for transitions, for instance).

However, according to the docs, Transition must be the parent of KeepAlive and Suspense. If we want to create a reusable transition component like demoed in the given issue, there's no way to use Suspense and KeepAlive properly.

Detailed design

Not Applicable

Drawbacks

This should land in a minor version, given it could create fallthrough warnings in existing projects during development. But probably, only people using this pattern of reusability built-in will notice the improvement.

Besides that, this should not harm anybody and it's a nice QoL improvement

Alternatives

One good alternative would be to provide a native way of passing attrs to slots. Still, there's the issue that the behaviour of the built-in components are not consistent at all.

Adoption strategy

There's no need for any action from consumers.

[ferferga]

I've opened a PR in core with a naive approach: vuejs/core#11140
Updated the original description to reflect it