'Custom Element (HTMLElement) allowed as child of list (<ul> and <ol>)?

I figure this is not allowed:

<ul>
  <my-li>
    #shadow-root
    <li>
      <span>hello!</span>
    </li>
  </my-li>
</ul>

But what can we do to not break semantics? I know that elements other than HTMLElement would exist, but Safari is not okay with this being the case. What would be the best solution to achieve a proper HTML semantic?

htmltagsweb-componentsemantic-markupcustom-element


Solution 1:[1]

Custom elements can customize existing elements. If you're wanting to create a custom list item element, you should probably extend the existing one. This will allow you to validly place it as a child of an unordered list element.

When you're constructing a custom element, you can tell it to extend an existing element like so:

class MyLI extends HTMLLIElement {
  constructor() {
    super()
    ...
  }
}

customElements.define('my-li', MyLI, { extends: 'li' })

To use it, you would still use a regular, semantic, syntactically correct list item element, but you tell the browser it's an instance of a custom element with the is attribute.

<ul>
  <li is="my-li">
    #shadow-root
    <span>hello!</span>
  </li>
</ul>

Solution 2:[2]

If you are looking for validating on semantic use of HTML elements, then you can do that here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sean
Solution 2 MJK618

Related Questions