Re: [w3c/webcomponents] > ""::slotted() should full support complex selector"" has came up multiple time and always get closed without any solution. (#881)

> But without a clear understanding of the problem?
What about that;
> Custom element let's say a ribbon. There HAS to be child nodes for the layout to make sens and work;
> Consider this web component `UIRibbonAccordion`:
> 
> ```
> const shadowRoot = this.attachShadow({ mode: 'open' });
> shadowRoot.innerHTML = '
>     <slot name=pin><\slot>
>     <fold>
>           <slot name=fold-pin><\slot>
>     </fold>
>     <!-- style -->
>     <style>
>           :host { .... }
>           :host > ::slotted(ui-ribbon-section) { .... }
>           :host > ::slotted(ui-ribbon-section) > ::slotted(fold) { .... }
>     </style>';
> }
> ```
> 
> Then in HTML;
> 
> ```
> <ui-ribbon-accordion>
>     <ui-ribbon-section slot="pin">
>             <!-- accordion tab -->
>             <ui-pin slot="tab">
>                   <img slot="icon" src="....">
>                   <label slot="label"> .... </span>
>             </ui-pin>
>             <!-- accordion panel -->
>             <ui-ribbon-fold slot=fold>
>                   <ui-pin>
>                         <img slot="icon" src="....">
>                         <label slot="label"> .... </span>
>                   </ui-pin>
>             </ui-ribbon-fold>
>     </ui-ribbon-section>
> </ui-ribbon-accordion>
> ```
> 
> Where can we say the accordion panel must be a display: flex or a transparent background?
> Only one level (top level) content styling makes it totally useless to put any nested content doesn't it?
It's not patience, it's taking us for fools.


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/881#issuecomment-632988430