Re: [w3c/webcomponents] Style ::slotted children (#594)

I know this an old thread but i was wondering if it could be reconsidered for this use case.

I have a breadcrumb and I want the html to be like this : 

```html
<ds-menu>
      <ul>
        <li><a href="#0">lorem ipsum</a></li>
        <li><a href="#0">lorem ipsum</a></li>
        <li>
             <a href="#0">menu with sub menu</a>
            <ul>
               <li><a href="#0">sub menu</a></li>
            </ul>
       </li>
        <li><a href="#0">lorem ipsum</a></li>
        <li><a href="#0">lorem ipsum</a></li>
      </ul>
</ds-menu>
```

I want to be able to style the submenu like this : 
```
::slotted(ul ul a) {
  color:red;
}
```

This is from a frontend framework I am building so I don't have access to the data various teams could be using to build it. So I rather they put the content in the slot (which is SEO friendly with bing), but i cannot access the elements that are nested in.

The only solution I have is to do something like this : 

```html
<ds-menu role="list">
        <ds-menuli role="listitem"><a href="#0">lorem ipsum</a></ds-menuli>
        <ds-menuli role="listitem"><a href="#0">lorem ipsum</a></ds-menuli>
        <ds-menuli role="listitem">
             <a href="#0">menu with sub menu</a>
            <ds-menu role="list">
               <ds-menuli role="listitem"><a href="#0">sub menu</a></ds-menuli>
            </ds-menu>
       </ds-menuli>
        <ds-menuli role="listitem"><a href="#0">lorem ipsum</a></ds-menuli>
        <ds-menuli role="listitem"><a href="#0">lorem ipsum</a></ds-menuli>
</ds-menu>
```
with roles to emulate a list for NVDA, JAWS, Voiceover, etc. Is that solution is considered good practice? I need it to work SEO and be accessible at the same time. 

I am sorry if this is not the best place to ask, if anyone can point me in the right direction if this is not the right forum, please do not hesitate.

-- 
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/594#issuecomment-555170734