I have a web-component at root level. The simplified version of which is shown below:

class AppLayout {
    constructor() {
        super();
        this.noShadow = true;
    }

    connectedCallback() {
        super.connectedCallback();
        this.render();
        this.insertAdjacentHTML("afterbegin", this.navigation);
    }

    render() {
        this.innerHTML = this.template;
    }

    get template() {
        return `
            <h1>Hello</h1>
        `;
    }

    navigation = `
        <script type="module">
            import './components/nav-bar.js'
        </script>
    `;

}
customElements.define('app-layout', AppLayout);

I want to load a script after this component loads. The script creates html for navigation and tries to add it to the app-layout element shown above. However, even though, it does find the app-layout element, it is unable to append the navBar element. It is, however, able to append the navBar to the body of the html. Any ideas what I'm missing.

const navLinks =
    `<ul>
        <li>Some</li>
        <li>Links</li>
    </ul>
    `;

const navBar = document.createElement('nav');

navBar.innerHTML = navLinks;

const appLayout = document.querySelector('app-layout'); // works with 'body' but not with 'appLayout'
console.log(appLayout); // Logs correct element 
appLayout.appendChild(navBar);

I know that what I'm trying to do here (loading a script inside a web component) is not ideal, however, I would like to still understand why the above doesn't work.