I would like to build my own list item as a custom element:

<ul>
  <my-li><!-- Advanced stuff in shadow dom will be rendered here --></my-li>
</ul>

However, within an ul tag, only the following elements are allowed (li, script, template). What would be the right approach here?

1.) Definition of an aria-role on the custom element?

<ul>
  <my-li aria-role="listitem"><!-- Advanced stuff in shadow dom will be rendered here --></my-li>
</ul>

2. Using the li tag inside the shadow-dom?

<ul>
  <my-li><!-- Advanced stuff in shadow dom will be rendered within a li-tag here --></my-li>
</ul>

3. Something else

CodePudding user response：

It's 3)

<div role="list">
    <my-li role="listitem"></my-li>
</div>

It cannot be 1) or 2) since both violate the HTML specs.

With 3) HTML specs and a11y demands are fulfilled.

CodePudding user response：

You will need to do something else, as your two first are both invalid HTML. You have several options, from best to worst:

Option 1:

<ul>
  <li>
    <your-custom-element/>
  </li>
</ul>

Option 2:
Manage the whole <ul> within the shadow DOM of your custom element, or put the <ul> as the root of it.

Option 3, which you should prefer avoid.

<div role="list">
  <your-custom-element role="list-item"/>
</div>

The best would be my option 1. It works because you can put anything you like inside `<li>`.

You should avoid my option 3 if you can, for several reasons:

- Avoid using ARIA unless it's really necessary
- No ARIA is better than bad ARIA
- It's not very clear if specifying the role on a custom element will work as expected, or if you have to report it yourself to the top element of your shadow DOM. It depends on what the browser / accessibility tree pass to assistive tools, and, as far as I know, it isn't very well defined, since custom elements are pretty new