Actualmente estoy trabajando en un proyecto de Vue y estoy tratando de configurar el HTML interno de un elemento HTML con una etiqueta de plantilla. Por ejemplo:
let divElem = document.getElementById('divElem') let innerHTMLContent = `<template><div>test</div></template>` divElem.innerHTML = innerHTMLContentSin embargo, el contenido de innerHTMLContent no se representa. En cambio, muestra #documentfragment debajo de la etiqueta de la plantilla cuando hago Inspeccionar -> Elementos. Sospecho firmemente que es la etiqueta de la plantilla la que está causando el problema.
¿Hay algún consejo sobre cómo puedo obtener el HTML interno para representar la etiqueta de la plantilla?
Te encontraste con DocumentFragment Pitfall aquí. Tienes razón en que esto tiene que ver con la plantilla.
Puede leer más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#avoiding_documentfragment_pitfall
como <template> se usa para representar contenido más adelante con, por ejemplo, Javascript, esto no funcionará ya que se esperan cambios después de agregar la plantilla al DOM, probablemente no con él.