5

He leído toda la documentación sobre web components y según los estándares no es posible aplicar estilos CSS aislados (shadow) a los elementos que el usuario introduce dentro de un custom element (light DOM), es decir, el contenido que el usuario añade dentro de un elemento slot, un ejemplo a continuación:

 <!-- Custom element --> 
    <indice-libro>
     <slot>

       <!-- Light DOM aquí / Este contenido lo introdujo el usuario -->
       <div class="container">
         <span class="seccion"> Titulo de sección...</span>
         <ul class="apartados">
           <li> ... </li>
           <li> ... </li>
           <li> ... </li>
         </ul>
       </div>

     </slot>
    </indice-libro>

En realidad, haciendo uso de la clase pseudo-elemento de CSS ::slotted() podría aplicar estilos unicamente al primer hijo directo del elemento slot, es decir, a div.container, pero no a sus hijos.

He llegado a dos conclusiones, o bien si que se puede aplicar estilos Shadow a toda la estructura de elementos del light DOM y no se como, o la segunda opción es que no se debe permitir al usuario introducir contenido dentro de un slot que tenga multi-nivel como en el ejemplo anterior, div dentro de div...

Si la respuesta correcta es la segunda, como debo realizar para que el usuario inserte contenido dentro del custom element y el resultado final sea igual o similar al del ejemplo que muestro anteriormente (intentando crear un elemento personalizado indice de libro) y pueda aplicar estilos aislados en el DOM tree del custom element.

Debo mencionar que no estoy utilizando Polymer ni ningún otra librería para desarrollar este custom element.

Muchas gracias!

1 respuesta 1

1

Para sobrepasar los estilos encapsulados de un componente web sin usar librerías como polymer tienes que usar los pseudos ::shadow ó /deep/ En tu caso sería algo así:

:host::shadow .apartados {...}

ó

:host /deep/ .apartados {...}
2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.