Search code examples
javascripthtmlthingsboard

Template content is an empty document fragment


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?


Solution

  • 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!