I am currently working on a Vue project, and I am trying to set the innerHTML of a HTML element with a template tag. For example:
let divElem = document.getElementById('divElem')
let innerHTMLContent = `<template><div>test</div></template>`
divElem.innerHTML = innerHTMLContent
However, the content of the innerHTMLContent does not get rendered. Instead, it shows #documentfragment below the template tag when I do the Inspect -> Elements. I strongly suspect is the template tag that is causing the issue.
Is there any advice on how I can get the innerHTML to render the template tag?
You ran into the DocumentFragment Pitfall here. You are right that this has to do with the template.
You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#avoiding_documentfragment_pitfall
as <template> is being used to render content later on with e.g. Javascript this wont work as changes are expected after adding the template to the DOM, probably not with it.