javascript - 如果从 <ul> 或 <ol> 扩展， 'extends' 选项是否允许我直接将 <li> 元素添加到自定义元素？

Question

我有一个自定义元素，<my-element> .它的目的是像<ol>一样行事。元素。我正在使用以下方法实例化它:

class MyElement extends HTMLElement { ... }
window.customElements.define('my-element', MyElement, { extends: 'ol' });

我生成的 HTML 如下所示:

<my-element>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</my-element>

自然地，这会导致基本的 HTML 验证失败:

Error: Element li not allowed as child of element my-element in this context. (Suppressing further errors from this subtree.)

Contexts in which element li may be used:

• Inside ol elements.
• Inside ul elements.

但是验证器不知道我是从 <ol> 扩展的元素开始。是否存在 extends: 'ol'请允许我添加 <li>元素直接添加到我的组件中，还是我仍然需要提供 <ol>包装器？

---

注意:这个问题与put a `<custom-tag>` instead of a `<ul>` or `<ol>` to create a list非常相似, 但没有提到 extends定义新的自定义元素时的选项。出于这个原因，我认为创建一个新问题而不是潜在地破坏那个问题的含义是合适的。

Answer 1

根据规范，自定义元素最终将能够扩展其他元素。但现在不是时候。

https://developers.google.com/web/fundamentals/web-components/customelements#extend

Warning: At time of writing, no browser has implemented customized built-in elements (status).

但这并不妨碍您的自定义元素表现得像另一个元素。

只需查看所有必需的 ARIA 属性以及您需要的 CSS，然后去做。