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.