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!