Tengo un componente web en el nivel raíz. La versión simplificada de la cual se muestra a continuación:

 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);

Quiero cargar un script después de que se cargue este componente. El script crea html para la navegación e intenta agregarlo al elemento app-layout que se muestra arriba. Sin embargo, aunque encuentra el elemento app-layout , no puede agregar el elemento navBar . Sin embargo, puede agregar la navBar de navegación al body del html. Cualquier idea de lo que me estoy perdiendo.

 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);

Sé que lo que estoy tratando de hacer aquí (cargar un script dentro de un componente web) no es ideal, sin embargo, me gustaría entender por qué lo anterior no funciona.