Vue: Allow template element tag name binding

[wbudd]

What problem does this feature solve?

The Vue docs give the following example of a case where a render function might be convenient:

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot/>
  </h1>
  <h2 v-else-if="level === 2">
    <slot/>
  </h2>
  <h3 v-else-if="level === 3">
    <slot/>
  </h3>
  <h4 v-else-if="level === 4">
    <slot/>
  </h4>
  <h5 v-else-if="level === 5">
    <slot/>
  </h5>
  <h6 v-else-if="level === 6">
    <slot/>
  </h6>
</script>

However, it seems to me that with the addition of only a single syntax keyword --perhaps "tag"-- templates could provide the same functionality as the render() function does through its first tag string return value.

What does the proposed API look like?

With tagName being a JavaScript variable (e.g., tagName = 'h1'):

<tag="tagName">foo</tag>

Or maybe something like:

<{ tagName }>foo</>

Or maybe:

<template tag="tagName">foo</template>

I wouldn't be surprised if this idea was already considered and discarded for good reasons, but I figured I'd throw this feature request out here anyway for discussion and future reference.

[posva]

You can actually use <component is="h1> if you want to have a dynamic element/component in the template.
Render functions allow you to dynamically build the dom tree: you end up with very different trees

[wbudd]

Oh, I had no idea <component>'s is accepts not just actual components, but plain element tags too. Thanks!

This feature doesn't seem to be documented, or at least not clearly -- some room for improvement there I believe.

Here's a working fiddle demo in case anyone else stumbles on this question.

[appsparkler]

@wbudd, thats a nice example. There is some documentation @ https://vuejs.org/v2/api/#is