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

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>
    <fold>
          <slot name=fold-pin>
    </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?

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