2

Not a duplicate of Template tag content is empty - A bug in Angular, while my question is about Vanilla Js.

I am working on a ThingsBoard widget. In the HTML tab, I have this simple template:

<template id="myTemplate">
  <div>Test</div>
</template>

In the JS tab, I am trying to get the contents of this template (to eventually clone it):

const template = document.querySelector("#myTemplate");
console.log(template.content);

However, I am getting an empty DocumentFrgament: Empty document-fragment

This is very strange since when I run it outside of ThingsBoard (for example here on a StackOverflow snippet), I do get the contents of the template:

const template = document.querySelector("#myTemplate");
console.log(template.content);
<template id="myTemplate">
  <div>Test</div>
</template>

Non-empty ducment-fragment

Any ideas?

Michael Haddad
  • 4,085
  • 7
  • 42
  • 82

1 Answers1

6

If your ThingsBoard example is using React or a similar DOM library, it might be programmatically creating the DOM, which could cause this issue.

When a <template> is constructed programmatically, using appendChild, the content remains empty. For example:

const template = document.createElement('template');
template.appendChild(document.createElement('div'));
console.log(template.content); // #document-fragment (empty)

Instead of template.appendChild, you must use template.content.appendChild for it to work correctly.

I hope this helps in some way!

Scott Rippey
  • 15,614
  • 5
  • 70
  • 85