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>
<ul>
<my-li><!-- Advanced stuff in shadow dom will be rendered within a li-tag here --></my-li>
</ul>
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments