enable `<template>` as component root element when it contains only one logical node

[caikan]

What problem does this feature solve?

From compiling template error message:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
But Cannot use as component root element because it may contain multiple nodes.

So I can't use <template> as component root element even if it contains only one node.

What does the proposed API look like?

Allow the following code as component root.

<template v-if="conditionA">
	<div v-if="conditionC"></div>
	<div v-else-if="conditionD"></div>
	<div v-else></div>
</template>
<template v-else>
	<div></div>
</template>

Do not allow the following code as component root.

<template>
	<div v-if="conditionA"></div>
	<div v-if="conditionB"></div>
</template>

[larryu]

@caikan For the second case, you can change the code as below.

<template>
	<div>
		<div v-if="conditionA"></div>
		<div v-if="conditionB"></div>
	</div>
</template>

Because your code may cause two div element in template which is not allowed in vue.
And you first sample code only results in one template and one div in template.

[phillip-haydon]

I'm curious, why can't the template contain multiple nodes and just become <div> , and avoid the nested single div. If the reasoning is so that you can pick the element you want as the root, can't that be solved by <template as="footer">??

[caikan]

@larryu Thanks. But sometimes I want to use the wrapper elements as few as posiblle.

[yyx990803]

This would technically require much more complex analyzing of the template structure and I'm not sure if it's worth it when you can achieve the equivalent with this:

<div v-if="!conditionA"></div>
<div v-else-if="conditionC"></div>
<div v-else-if="conditionD"></div>
<div v-else></div>

[caikan]

If the implementation process is complex, can we temporarily use a warning instead of a compilation error and allow its first child node as the root element?

BTW: <keep-alive> can be used as component root element now(Vue v2.3.4), but the non-first child node will be discarded. I think there should be a warning here, and <template> can be treated in the same way.

OK, I think I may use <keep-alive> instead of <template> as the root elements wrapper now.

[fritx]

+1, feature request.

had to make <th>s, <td>s as root elements of <template>, otherwise <table>'s layout would break.

<!-- some-table.vue -->
<table>
  <tr>
    <copy-first :arr="arr">
      <template slot="elem" slot-scope="s">
        <td>{{s.index}}</td>
      </template>
    </copy-first>
  </tr>
</table>

<style>
tr th:nth-child(1), tr th:nth-child(2),
tr td:nth-child(1), tr td:nth-child(2) {
  /* hack of fixed column */
}
</style>

<!-- copy-first.vue -->
<template>
  <slot v-if="arr[0]" name="elem" :index="0" :elem="arr[0]"></slot>
  <slot v-for="(elem, i) in arr" :key="i" name="elem" :index="i" :elem="elem"></slot>
</template>

<script>
export default {
  name: 'copy-first',
  props: { arr: Array }
}
</script>

[asolopovas]

+1 When it comes to generating tables it simplifies things

[brandonferens]

+1

Perhaps something as simple as allowing <root>...</root> as the root component wrapper? If that element is used it could just return everything within the element, but not the root wrapper itself?

[djschilling]

React has a nice implementation of this in the current version: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

[lichenhao]

How about add fragment for root like a Web Component with shadow root.

[marktnoonan]

Another use for this is that am refactoring a component in order to make it easier to maintain. It's a form and various parts of it fall on a CSS grid. The extra wrapper required when I group several related elements in the same component is causing the grid to treat that whole component as one grid-item. I'm sure I can work around that, but hope we end up with a fragment syntax like react's (if we don't already have such a thing?)