Estoy haciendo un componente web con JavaScript vainilla de la siguiente manera:

 <template id="TEMPLATE_UPLOADER"> <div>Try Query Me</div> </template> <script> customElements.define('my-uploader', class extends HTMLElement { constructor() { const template = document.getElementById("TEMPLATE_UPLOADER"); const content = template.content; let superThis = super() // Create and binds the this keyword let shadowRoot = superThis.attachShadow({mode: "open"}); shadowRoot.appendChild(template.cloneNode(content, true)); } /** Custom Component Reactions **/ connectedCallback() { setTimeout(this.init.bind(this), 1000) } init() { const el = this.shadowRoot.querySelector('div'); console.log('I hope el is not null:', el) } }); </script> <my-uploader></my-uploader>

Ahora dentro de init() deseo consultar algunos de los elementos dentro de la plantilla para este componente. Sin embargo this.shadowRoot.querySelector siempre devuelve null . Señalé que los elementos aún no se crearon en el momento de la devolución de llamada connectedCallback , por lo que configuré un tiempo de espera para llamar a init() después de 1 segundo para asegurarme de que se terminó de crear, pero obtuve el mismo resultado. Así es como se ve this.shadowRoot en Chrome (nota al margen this es <my-uploader></my-uploader> ):

Como puede ver, hay divs dentro, sin embargo, this.shadowRoot.querySelector('div') devuelve nulo. ¿Cómo consultar elementos dentro del componente web?