Apply CSS styles to Light DOM (shadow DOM) in custom element HTML5

I have read all the documentation about web components and according to the standards it is not possible to apply isolated CSS styles (shadow) to the elements that the user introduces within a custom element (light DOM), that is, the content that the user add an example below within a slot element:

 <!-- 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>

Actually, using the pseudo-element class of CSS :: slotted () could apply styles only to the first direct child of the slot element, that is, to div.container , but not to its children.

I have come to two conclusions, or if you can apply Shadow styles to the entire structure of elements of the DOM light and I do not know how, or the second option is that the user should not be allowed to enter content into a slot that has multi-level as in the previous example, div within div ...

If the correct answer is the second one, how should I do so that the user inserts content within the custom element and the final result is the same or similar to the example shown above (trying to create a custom book index element) and can apply isolated styles in the DOM tree of the custom element.

I must mention that I am not using Polymer or any other library to develop this custom element.

Thank you very much!