0
208
ViewsTemplate 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:
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>
Any ideas?
1 answers
Answer question0
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!