Description
What problem does this feature solve?
Currently, it's not possible to wrap a teleport by a transition because Component inside <Transition> renders non-element root node that cannot be animated.
While I agree that transition shouldn't start trying to find the first actual element it can apply classes to in custom components, I think that there should be an exception for Teleport.
It's not an uncommon use case that you want to teleport some popover or modal to the body and want to add a transition when it appears or gets removed. I am aware that you can always transition the contents of the stuff you are teleporting but that is less flexible and composable. e.g. a reusable component that always ports itself to the body currently can't be wrapped by a custom transition.
Both components are part of the core library and also don't work as normal components do. So I think it shouldn't be a problem if the transition component sniffs if its child is a teleport and applies the transition to the teleported element instead. Ofc that would require that the teleport only consists of a single root but that is a given (the error message already makes that clear and could be changed for the teleport case: SyntaxError: <Transition> expects exactly one child element or component.)
What does the proposed API look like?
<transition>
<teleport to="body">
<div>Whatever</div>
</teleport>
</transition>