Using JS to fetch HTML with nested elements as string and append it to the DOM causes nested elements to be dropped [closed]

I had the idea to crate a few Javascript functions to help me create web pages faster by reusing HTML snippets and dynamically building the pages. I am aware that this is solved already by quite a few frameworks, I just didn't want to jump into learning any of them just yet, as I'm quite new in Javascript to begin with.

The functions I created work well as long as the snippet I fetch is a single element, but when I try to work with a more complex component, the nested elements don't get appended to the DOM. So here is the code:

export class HtmlHandler {

    static async fetchHtmlText(filename, directory){
        const response = await fetch(`./components/${directory}/${filename}.html`);
        if (!response.ok) throw new Error(`Failed to load ${filename}`);
        return await response.text();
    }

    static async appendHtml(root, htmlText) {
        root.insertAdjacentHTML("beforeend", htmlText);
        return root.lastElementChild;
    }
}

export class PageBuilder {

    static async appendComponent(root, filename, directory) {
        const html = await HtmlHandler.fetchHtmlText(filename, directory);
        console.log(html);
        return HtmlHandler.appendHtml(root, html);
    }

Here is the exact HTML snippet that causes it to break. Keep in mind that I'm using Tailwind in this project aswell so that explains the class attributes.

<label class="flex items-center w-[30ch] gap-2 p-2 border border-slate-300 rounded-md cursor-pointer">
    <input type="checkbox" class="h-4 w-4 accent-sky-600 ">
</label>

And here is the function where I'm trying to use it:

async function fillGrid(grid) {
    
    const unitArray = await objFromJson("manifest");
    unitArray.forEach(async (element, index) => {
        
        const unitSelector = await PageBuilder.appendComponent(grid, "UnitSelector", Dirs.COMPLEX);
        console.log(unitSelector.outerHTML);
        unitSelector.id = `unitSelector-${index}`;
        unitSelector.textContent = element.title;

    });
}

As you can see I'm console logging the unitSelector.outerHTML which, get this: shows my exact HTML snippet perfectly every time, and yet the checkboxes don't show up in the DOM.

I tried a couple things already to make it work here with template tag for example:

const template = document.createElement('template');
  template.innerHTML = htmlText.trim();
  const clone = template.content.cloneNode(true);
  root.appendChild(clone);
  return root.lastElementChild;

I also tried using DOMParser. I even tried modifying the html file thinking maybe the issue lies there. It's always the same result. outerHTML shows the input tag perfectly yet it never appears in the DOM. I'm starting to doubt this can even be done. Most of the answers I found online suggest these two solutions I already tried. Keep in mind, that the whole point of it is to have some component based page building without actually learning a new framework.