Foros del Web » Creando para Internet » Diseño web »

Web component litElement acceder light dom desde shadowRoot

Estas en el tema de Web component litElement acceder light dom desde shadowRoot en el foro de Diseño web en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 10/02/2022, 13:07
 
Fecha de Ingreso: julio-2008
Mensajes: 154
Antigüedad: 13 años, 10 meses
Puntos: 1
Sonrisa Web component litElement acceder light dom desde shadowRoot

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,



La zona horaria es GMT -6. Ahora son las 07:26.