Include HTMLElement in conditionally rendered template.

[eScribMac]

I am using a library that produces an HTMLElement that is typically attached to the DOM with appendChild, or similar. How can I include this element in a conditionally rendered template, similar to the tabs example?

I tried the following code, but the element appears to be missing when the watcher is called:

const element = thirdPartyLibrary.getElement();

function injectElement() {
  if (state.selectedPage === 2) {
    document.getElementById("my-element-div")!.appendChild(element as Node);
  }
}

watch(injectElement);

When I change to tab 2, I get: Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

[justin-schroeder]

Hmm, not sure I fully understand the use case. Perhaps you can whip up a quick codepen of it?