0
217
ViewsEl contenido de la plantilla es un fragmento de documento vacío
No hay un duplicado del contenido de la etiqueta de plantilla vacío : un error en Angular, mientras que mi pregunta es sobre Vanilla Js.
Estoy trabajando en un widget de ThingsBoard . En la pestaña HTML , tengo esta plantilla simple:
<template id="myTemplate"> <div>Test</div> </template>En la pestaña JS, intento obtener el contenido de esta plantilla (para eventualmente clonarla):
const template = document.querySelector("#myTemplate"); console.log(template.content); Sin embargo, obtengo un DocumentFrgament vacío : 
Esto es muy extraño ya que cuando lo ejecuto fuera de ThingsBoard (por ejemplo, aquí en un fragmento de StackOverflow) , obtengo el contenido de la plantilla:
const template = document.querySelector("#myTemplate"); console.log(template.content); <template id="myTemplate"> <div>Test</div> </template> 
¿Algunas ideas?
1 answers
Answer question0
Si su ejemplo de ThingsBoard usa React o una biblioteca DOM similar, podría estar creando el DOM mediante programación, lo que podría causar este problema.
Cuando se construye una <template> mediante programación, usando appendChild , el content permanece vacío. Por ejemplo:
const template = document.createElement('template'); template.appendChild(document.createElement('div')); console.log(template.content); // #document-fragment (empty) En lugar de template.appendChild , debe usar template.content.appendChild para que funcione correctamente.
¡Espero que esto ayude de alguna manera!