<template content> to render children into template’s content

[runarberg]

As of now the non-directive <template> element is kind of useless, as the children are actually inserted into the DOM, as opposed to the content of the template element (like in vanilla HTML).

Problem

The benefits of using a <template> in normal HTML is that the contents don’t actually get rendered into the DOM, rather they stay hidden, this includes IDrefs, etc. However if you use non-directive templates in Vue SFCs the children of the template incorrectly gets added to the DOM, making them functionally the same as <div v-show="false">.

To clarify the difference. Imagine you have an HTML like this:

<template id="my-template">
  <div id="my-div"></div>
</template>

in normal vanilla HTML if you do this:

const template = document.getElementById("my-template");

// my-div is not rendered in the DOM
document.getElementById("my-div");
// => undefined
template.querySelector("#my-div");
// => undefined

// Instead it is rendered inside the template’s content
template.content.getElementById("my-div");
// => <div id="my-div">
template.content.querySelector("#my-div");
// => <div id="my-div">

In vue SFC this is not the behavior. Instead you get the unexpected behavior of:

<template>
  <template ref="template">
    <div id="my-div" />
  </template>
</template>

<script setup>
import { onMounted, ref } from "vue";

const template = ref(null);

onMounted(() => {
  // my-div is incorrectly rendered into the DOM
  document.getElementById("my-div");
  // <div id="my-div">
  template.value.querySelector("#my-div");
  // <div id="my-div">

  // This does not work
  template.value.content.getElementById("my-div");
  // => undefined
  template.value.content.querySelector("#my-div");
  // => undefined
});
</script>

This poses a problem if you want to render some content who’s purpose is to be cloned later, as all the ids will be duplicated as well.

Proposed Solution

Fixing this behavior is probably hard for backwards compatibility as some implementations might rely on this behavior. As such I propose an opt in content boolean attribute for the non-directive <template> elements. When the content boolean attribute is present, the SFC rendering engine will insert all the child nodes into the template.content as opposed to just the template. A simplified version may look like this:

const template = createElement("template");
if (hasAttribute(templateNode, "content")) {
  template.content.append(...render(templateNode.children));
} else {
  template.append(...render(templateNode.children))
}

See discussion

[runarberg]

See stack overflow question: https://stackoverflow.com/questions/75310932/vue-add-content-inside-document-fragment

[tommie]

This would help with integration of https://pagedjs.org/. It moves the HTML into a <template>, and then renders a paginated version.

[teleskop150750]

 <template id="my-template" v-html="'<pre>foo<pre>'"></template>