自定义元素（htmlelement）允许作为列表的孩子（＆lt; ul＆gt; and＆＆＆lt; ol＆gt;）？

Question

我认为这是不允许的：

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

但是我们该怎么做才能不打破语义？我知道，htmlelement以外的其他元素将存在，但是Safari并非如此。获得适当的HTML语义的最佳解决方案是什么？

Answer 1

当您构造自定义元素时，您可以告诉它以这样的方式扩展现有元素：

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

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

要使用它，您仍然会使用常规，语义，语法上正确的列表项目元素，但是您告诉浏览器，它是一个实例带有的自定义元素是属性。

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

Answer 2

如果您正在寻求验证HTML元素的语义使用，则可以执行在这里