Native content inside native (non-directive) <template> elements renders to the DOM instead of fragment

[runarberg]

When I use native <template> inside an SFC it renders the content as direct children of the <template> rather than as a DocumentFragment of the <template>’s content. This is problematic as and not what you would expect when using native <template>, making them kind of useless.

Here is an example. If the below example was working as you would expect, than document.getElementById() shouldn’t find the element in question, but template.value.content.getElementById() should:

https://play.vuejs.org/#eNqVU8tuwjAQ/JWVLwWJhkN7okBVKAcq9aHC0ReUGBrq2JYflCrKv3ftxBAQQurRM+Od2fW6JE9KJTvHyIAMTapzZcEw69SYirxQUlsoQYpX6YRlWQ80W0MFay0LuMFbNw9UUJFKYSxYVii+sgxGXtURjvMu0qfkVGIdYRsNJZQcNZlMXYHkZQ0VhxidThdGYyipgPPCyW7FnY8Q8RpI0CHQG2ZnnHmXye88w+JRd9so0OwxsWwfU6AznCc7mET8/2WpqHxTw349c5w2HuIlPAEcTn4Ko2NFSgKNgizfQZ61qKPZeCELBo3XsI/Kuma/ZREANV5Gm0Y9gLI8G2pVDft+IYL+uem5rT+bT9Sf2JEesQYDrvNNsjVS4MKFB6QklYXKOdPvyua4CJRgybpFSlacy5+XgFntWC/i6RdLvy/gW7P3GCUfmhmmdziuA2dXGt+ppmeLN3yMFlnIzHFUXyE/mZHc+Yy1bOJEhrFbupB2Hr5NLjZLM9vjOExsygf1yiroKcH/M73S+jHuXXIf7uHSkOoPscpIdw==

As a comparison here is how you use <template> in vanilla JS:

https://developer.mozilla.org/en-US/play?id=icLjb4bL3ME%2BYuYumj%2BtfyYjysIIYclSH%2F%2F%2BCwtAd7kW0xcH8Yg7HW9ieifFT8YZdyWmxNrKDjB2EJ8J

My question is: Is this intended behavior, or is this a bug? Is there any way to get Vue to render the content inside the <template>’s content like you would expect?

[Shyam-Chen]

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const template = ref<HTMLDivElement>();
const templateContent = ref('');

onMounted(() => {
  templateContent.value = template.value.textContent;
});
</script>

<template>
  <template>
    <div ref="template">Some Content</div>
  </template>

  <p>Template Content: {{ templateContent }}</p>
</template>

[runarberg]

So the expectation here is that:

template.value.content.textContent
// => ""
// Was expecting "Some Content"

when in actuality you need to do:

template.value.textContent
// => "Some Content"

The difference is that the content of the <template> is added to the template element it self (and therefor the DOM) as opposed to the expected behavior of being added to the content property of the template element.

I can imagine Vue is doing something akin to this:

const templateEl = document.createElement("template");
templateEl.append("Some Content");

But should be doing something like this:

  const templateEl = document.createElement("template");
- templateEl.append("Some Content");
+ templateEl.content.append("Some Content");

The current behavior is not using the power of the <template> element which is that it’s content is not rendered to the DOM. Meaning that the current behavior makes the <template> element kind of just another way to write <div v-show="false">.