Me estoy peleando con un triste código hecho en Js.
Quiero acceder desde el shadowRoot a light dom para poder interactuar con él. Y no hay manera
Os pongo el código tanto del webComponent como el html usado para crear el objeto
Este es un fragmento del webcomponent (JS)
Código:
Hay un slot llamado container para que luego desde el html del index se pueda mostrar cierta información en este caso solo es un simple div.render() { return html` <hr> <div>header web componente <br> <button @click="${this.click}"> clicc</button> <slot> </slot> <slot name="container"> </slot> <hr> ` } click(){ console.log(this.shadowRoot.querySelector('slot[name=container]')); }
Pongo el código HTML
Código:
Desde el botón quiero mostrar en consola el árbol del slot container, pero me sale en blanco, ya que me coje el slot del shadowRoot no el del light dom<body> <app-element> <button> Guardar</button> <slot name="container"> <div id="contenido"> contenido sloot</div> </slot> </app-element> </body>
Quiero acceder a todos los items del light dom.
En este caso modificar el innerHTML del div contenido
¿Me podéis ayudar?
Muchas gracias,