Buenas noches,
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:
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]'));
}
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.
Pongo el código HTML
Código:
<body>
<app-element>
<button> Guardar</button>
<slot name="container">
<div id="contenido"> contenido sloot</div>
</slot>
</app-element>
</body>
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
Quiero acceder a todos los items del light dom.
En este caso modificar el innerHTML del div contenido
¿Me podéis ayudar?
Muchas gracias,