Transition should sniff for teleport in custom components

[Fuzzyma]

Vue version

3.5.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNVE1v2zAM/SuadugGNHaG7pS5xT5QYNthG9YcfVFsOlEjS4JEOwmC/PdRUpw6RVrsZIt87+mRErXnX6zN+g74jBe+ctIi84CdvSu1bK1xyPbMQcMOrHGmZVcEvTqlvpnWHuNZHhZB6epTqUtdGe1JamU27DYIvGuE8vC+1EWetqENaIHQWiUQaMVYsegQjWafKyWr9W3Jj/Q34Vvyuwf65N9lDUWekIk1d0J7iZKYWrRAvEbUQPiQpXx02U9kc1QsOcsTM3+iRjv/ITYHBbF2NJRbmHpHcmfiRyRha9kzWQcJYyhe5BQYdPJB6JKTIh/1hZYedyr8ZsHLBDSCm4S2Xw8hBaKHCRq2D2rGikribsamdBSHoDAmonlGiwd4TvxwiSgqlD08I6dgouOphhkTSrFpduMZCA+D2ltqRIIuRLVeOtPpesYWqgsIxjayxhVtPp3abQysQC5XOI4sjKvBUcRumTdK1sQmqbQBXa3YKH7N0dMFbOQye/RG092Om5a8oqsgFbjfNrj0JZ8lOyFHjs3mZ4yh60KdKV6toFpfiD/6bYiV/I8DD66nS3LKoXBLwJS+f/gFW/o/JVtTd4rQryT/AhXXBY8J9pUaRbZHuOj2RxxDqZdzf79FoOYfiwpGA/IQ8SWnsQxT8FLpT3Zvso+RR/2kLg4jfeFxGD0Pp5EYvxHxEXht1i8N0jAcLw7O2dicTQk//AP1sJ3y

Steps to reproduce

Click the button

What is expected?

Both should transition in

What is actually happening?

One transitions correctly, the other throws a warning and blinks into existance

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 PRO 6850HS with Radeon Graphics
    Memory: 11.86 GB / 15.28 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    Yarn: 3.2.2 - ~/.nvm/versions/node/v22.2.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: 7.25.0 - ~/.nvm/versions/node/v22.2.0/bin/pnpm
    bun: 1.1.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.55

Any additional comments?

This is a follow up from

• Transition should sniff for Teleport #5836

My Intention in #5836 was, that a user should be able to do this:

<Transition>
  <CustomComp />
</Transition>

<!-- Custom Comp -->
<Teleport>
  <div></div>
</Teleport>

However, the fix for #5836 only allows:

<Transition>
  <Teleport>
    <div></div>
  </Teleport>
</Transition>

For me as a user those 2 should feel equivalent.
The way it is now is not really useful. If you are not gonna use a custom component inside transition, you could just easily swap teleport and transition around (which already worked before the fix):

<teleport>
  <transition>
    <div></div>
  </transition>
</teleport>

But the whole point of #5836 was to allow to transition any component that teleports internally.
And since nesting a custom component into a transition works already, teleport should just be transparent in this case

Usecase:

• modals <transition><Modal /></transition>
• popovers
• ...

[edison1105]

the underlying cause is the same as #3338

[Fuzzyma]

Transitions of custom components with a single element work already.
There is no multi root involved here.
The teleport in between should just be invisible to the transition