Allow more than 1 root element for Template

[tochoromero]

What problem does this feature solve?

Right now you can only have 1 root element per template. I know this is by design, but I find myself wrapping everything around a <div> a lot. Now, most of the time is not a big deal, I can live with that, the problem is when either Bootstrap requires a very specific hierarchy, or when dealing with Tables that also require a very specific hierarchy and wrapping everything on a div is not an option.

What does the proposed API look like?

Now, there will be a couple of things to figure out, mainly to what element will the properties provided on the Custom Element will be attached to. I think there two things that can be done:

1. Find the first child and stick everything to it.
2. Provide a custom attribute to indicate to what element they should be attached to.

[sirlancelot]

Can you build a specific scenario in which you need a template with multiple root nodes? I've been using Bootstrap and tables with Vue since the beginning and have never needed multiple root nodes.

[posva]

Provide a custom attribute to indicate to what element they should be attached to.

FYI you can use $listeners and $props to easily pass down things to the element you want

You can have multiple root elements in functional components:

render: h => [h('p', 'one'), h('p', 'two')]

Personally, I actually like the fact that we only have one root as it clears out the questions you just listed because there's only one possible answer

[tochoromero]

On my very specific Table use case I have a Category component that I would like to contain two <tbody> root elements. In the first <tbody> I will show the Category information, in the second <tbody> I will list all the Category Items with its details. And the main Category body will control the visibility of the second one. I want it to look something like this:

Category.vue

<template>
   <tbody>
	<tr @click="showItems = true">
		<td>{{ category.id }}</td>
		<td>{{ category.name }}</td>
	</tr>
   </tbody>
   <tbody v-show="showItems">
      <tr v-for="item in category.items">...<tr>
   </tbody>
</template>

Now I know I could move them to two separate components and have them communicate, but they really belong together, they have computed properties and methods they will share, and yes I can move those to a mixin, but that just makes everything a bit more complex.

Now, regarding Bootstrap, I recently stumbled on this:
I was using an input-group and I needed to have something like this:

<div class="input-group">
    <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
    <input v-show="isDisabled" class="form-control form-control-sm"/>
    <vue-numeric v-show="!isDisabled" class="form-control"/>
</div>

Now, the input/vue-numeric pair is reusable, I actually have quite some logic around those two, so I wanted to reuse them, but the input-group itself is not reusable, since in some places I don't need an input group or the input group is very different.
Now when I move the <input> and the <vue-numeric> into its own component I'm forced to use v-if and v-else. Unfortunately, that caused a whole lot of other problems, I needed both elements to be mounted at all times, and working around it wasn't fun, my problems would be gone if I could just have them both mounted and just v-show them as necessary. Of course, I found a way to work around it, but it wasn't the clean simpler approach I wanted and that I can achieve in other frameworks.

I truly love Vue, this is really just neat picking. It would just be nice to have the option. The nice thing about this feature is that if you don't want to you don't have to use it even think about it, just keep wrapping everything in a div.

[tochoromero]

FYI you can use $listeners and $props to easily pass down things to the element you want

I was wondering about that, I remember reading that long time ago, but couldn't find it, thanks for the tip

[titouancreach]

The new react version has Fragment: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html. They can do:

<template>
  <> <!-- render nothing -->
   <tbody>
	<tr @click="showItems = true">
		<td>{{ category.id }}</td>
		<td>{{ category.name }}</td>
	</tr>
   </tbody>
   <tbody v-show="showItems">
      <tr v-for="item in category.items">...<tr>
   </tbody>
   </>
</template>

What about using this syntax in Vue ?

[tochoromero]

Honest question here, why do we even need to wrap everything on a single root element, is this a technical limitation or an arbitrary decision?

[yyx990803]

Technical, due to how the diff algorithm is written. It's obviously possible to update it, but it takes significant changes to the current algorithm (React did that during a complete rewrite).

[tochoromero]

Got it, thank you for the details

[pxwee5]

@sirlancelot One case is when you're using Nuxt, where everything is a Vue SFC.

[trusktr]

Honest question here, why do we even need to wrap everything on a single root element, is this a technical limitation or an arbitrary decision?

Technical, due to how the diff algorithm is written.

How's this very technical to implement?

<template>
   <tbody></tbody>
   <tbody></tbody>
</template>

can easily be transpiled to

render: h => [ h('tbody'), h('tbody') ]

thus solving the problem (idk what it was doing before, but this is easy to do).

[trusktr]

Here's proof that it works: https://jsfiddle.net/b049qboe/1

It doesn't seem like that requires any update to the diff algo.

[LinusBorg]

@trusktr The technical challenge is not with the conversion of template to render function, it's with the implementation of the virtualdom which the render function builds nodes for.

Each child component is represented in its parent virtual dom by a single vnode. In the current implementation, the diffing algorithm (responsible for comparing the current with the old virtualDOM and patching differences into the real DOM) can rely on the fact that every vnode of a child component has a single matching HTML element in the real dom, so the next vnode in the virutalDOM after the child component vnode is guaranteed to match the next HTML Element in the real DOM.

(Sidenote about your fiddle: functional components don't have that restriction because the are not represented with a vnode in the parent, since they don't have an instance and don't manage their own virtualdom)

Allowing fragments requires significant changes to that algorithm, since we now would somehow have to keep the parent informed at all times about how many root nodes the child is currently managing in the real DOM, so when the parent re-renders, it knows how many HTML-Elements it has to "skip" to reach the next HTML Element that doesn't belong to the child component,

That's a very intricate/complicated piece of code at the heart of Vue, and it is critical for render performance - so it's not only important to make it work correctly but also to make it highly performant

That's a pretty hefty task. As Evan mentioned, React waited for a complete re-write of its rendering layer to remove that restriction.

[trusktr]

Are you implying that opting not to convert multiple roots from a template into multiple roots in a render function (which works) is because of performance, but it nonetheless would work? Can you make a fiddle that shows when it doesn't work?