TransitionGroup doesn't render a wrapper element by default in Vue 3, it uses a Fragment

[crutch12]

What problem does this feature solve?

I suddenly found out that vue2 <TransitionGroup/> component transforms into <span/> tag.

Vue2:

<TransitionGroup name="vue2" class="vue2-class">
  <span key="1" class="class-1">1</span>
  <span key="2" class="class-2">2</span>
</TransitionGroup>

compiles to

<span class="vue2-class">
  <span class="class-1">1</span>
  <span class="class-2">2</span>
</span>

---

Meanwhile vue3 <TransitionGroup/> doesn't create element in DOM, so it breaks previous behaviour and old code.

Vue3:

<TransitionGroup name="vue3" class="vue3-class">
  <span key="1" class="class-1">1</span>
  <span key="2" class="class-2">2</span>
</TransitionGroup>

compiles to

<span class="class-1">1</span>
<span class="class-2">2</span>

---

Also Vue3:

<TransitionGroup name="vue3" class="vue3-class">
  <span key="1" class="class-1">1</span>
</TransitionGroup>

compiles to

<span class="class-1 vue3-class">1</span>

It moves classes from <TransitionGroup/> to single child.

What does the proposed API look like?

We should add this info to vue3 migration guide (maybe here: https://v3.vuejs.org/guide/migration/transition.html#overview)

The fastest way to migrate: wrap your <TransitionGroup/> with new <span/>:

Before:

<TransitionGroup name="vue2" class="vue2-class">
  <span key="1" class="class-1">1</span>
  <span key="2" class="class-2">2</span>
</TransitionGroup>

After:

<span class="vue3-class">
  <TransitionGroup name="vue3">
    <span key="1" class="class-1">1</span>
    <span key="2" class="class-2">2</span>
  </TransitionGroup>
</span>

UPD:

Checked vue2 docs: https://v3.vuejs.org/guide/transitions-list.html#list-transitions
And vue3 docs: https://v3.vuejs.org/guide/transitions-list.html#list-transitions

Unlike <transition>, it renders an actual element: a <span> by default. You can change the element that's rendered with the tag attribute.

So it looks like a vue3 <transition-group/> bug. Or v3 docs are wrong.

The fastest way to fix your code: add tag="span" to <transition-group/>

[LinusBorg]

Moving this to the docs repo

[crutch12]

@LinusBorg found out this is a bug :D
Checked vue3 docs: https://v3.vuejs.org/guide/transitions-list.html#list-transitions

Unlike <transition>, it renders an actual element: a <span> by default. You can change the element that's rendered with the tag attribute.

And it doesn't render <span> by default

Or this is a vue3 docs bug

[LinusBorg]

It's a docs issue. Since we have Fragments support in Vue 3, we don't need a root element anymore for TransitionGroup. You can have one created by defining it with the tag prop though, which was previously used in Vue 2 to use another element than the default span:

<TransitionGroup tag="span" name="vue2" class="vue2-class">
  <span key="1" class="class-1">1</span>
  <span key="2" class="class-2">2</span>
</TransitionGroup>

Relevant code:

https://github.com/vuejs/vue-next/blob/ea5f92ae051be511558569eaf4c2afa2839c3e4d/packages/runtime-dom/src/components/TransitionGroup.ts#L101

[crutch12]

@LinusBorg yeah, I see, already updated issue description

[raukaute]

When rendering server-side only children of <transition-group> will be rendered, and the tag is replaced by Fragment. This totally makes sense performance wise, but leads to mismatch on client hydration. Is this relevant here, or should it be an issue on it's own?

[LinusBorg]

I don't see how that should lead to a hydration mismatch? I think I don't get what you mean

[raukaute]

Admittedly (my bad), it's not the exact same case as you were talking about the default when no tag prop is passed to TransitionGroup.
However, if we do and instead of the desired tag we get a Fragment (i.e. <!--[--><!--]-->) then this will cause a mismatch in the hydration process on the client (comparing start of fragment <!--[--> to <desired-tag>) Please correct me if I'm wrong, but in the end that's when the console keeps telling me.
Here's a basic reproduction of what I mean.

[LinusBorg]

However, if we do and instead of the desired tag we get a Fragment (i.e. )

That's the part I'm having trouble understanding. I'd like a reproduction of that actually happening during SSR. If that's the case, open an issue with that reproduction in the vue-next repo.

We obviously do now knowingly offer APIs that break SSR.

[raukaute]

Thanks for the prompt answer. I will follow your advice and open an issue over in the vue-next repo.

We obviously do now knowingly offer APIs that break SSR.

Can you give an example?

[LinusBorg]

You gave an example. You claim that during SSR, TransitionGroup, if provided with a tag prop, still renders a fragment, but on the client it renders a wrapper element.

If that was implemented this way knowingly by us, we would have coded something that will always break hydration. Of course we won't do such a thing, so if what you claim is true, it's a bug, not a documentation issue.

[raukaute]

Ah I got you. I think instead of 'now' you mean 'not'.

[LinusBorg]

Oh. Right. 🙈