“扩展”选项是否允许我直接将 <li> 元素添加到自定义元素（如果从 <ul> 或 <ol> 扩展的话）？

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 验证：

错误：在此上下文中不允许元素 li 作为元素 my-element 的子元素。 （抑制该子树的进一步错误。）

可以使用元素 li 的上下文：

• ol 元素内部。
• ul 元素内部。

但是验证器不知道我是从

<ol>

元素开始扩展的。

extends: 'ol'

的存在是否允许我将

<li>

元素直接添加到我的组件中，还是我仍然需要提供

<ol>

包装器？

---

注意：这个问题与 put a `` 而不是 `

` 或 `
` to create a list 非常相似，但是在定义新的自定义元素时没有提及

extends

选项。出于这个原因，我认为创建一个新问题是合适的，而不是潜在地破坏该问题的含义。

是的，它可以与

{extends: 'ol'}

一起使用。

但不要忘记自定义内置元素是通过使用带有

is

属性的原始元素标签来定义的。

<ol is="my-element">
    <li>...
    <li>...
</ol>

另外，你的课程必须延长

HTMLOListElement

：

class MyElement extends HTMLOListElement {...}

它可以在 Chrome 版本 67 及以上版本上运行 ：

customElements.define( 'my-element', class extends HTMLOListElement {
  constructor() {
    super()
    this.addEventListener('click', ev => 
        console.info( 'click on ' + ev.target.textContent) 
    )
  }
}, { extends: 'ol' } )

<ol is="my-element">
    <li>item 1</li>
    <li>item 2</li>
</ol>

对于其他浏览器，您可以使用

polyfill。

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

https://web.dev/articles/custom-elements-v1#extending_native_html_elements

警告：在撰写本文时，没有浏览器实现自定义内置元素（

status）。

但这并不能阻止您的自定义元素像另一个元素一样工作。
只需查看所有必需的 ARIA 属性以及您需要的 CSS，然后就可以了。

---

更新： Apple 以及 Safari 不打算实现此功能。但是，有一些 Polyfill 可以使其在所有当前浏览器上工作。

Answer 1

是的，它可以与

{extends: 'ol'}

一起使用。

但不要忘记自定义内置元素是通过使用带有

is

属性的原始元素标签来定义的。

<ol is="my-element">
    <li>...
    <li>...
</ol>

另外，你的课程必须延长

HTMLOListElement

：

class MyElement extends HTMLOListElement {...}

它可以在 Chrome 版本 67 及以上版本上运行 ：

customElements.define( 'my-element', class extends HTMLOListElement {
  constructor() {
    super()
    this.addEventListener('click', ev => 
        console.info( 'click on ' + ev.target.textContent) 
    )
  }
}, { extends: 'ol' } )

<ol is="my-element">
    <li>item 1</li>
    <li>item 2</li>
</ol>

对于其他浏览器，您可以使用

polyfill。

Answer 2

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

https://web.dev/articles/custom-elements-v1#extending_native_html_elements

警告：在撰写本文时，没有浏览器实现自定义内置元素（

status）。

但这并不能阻止您的自定义元素像另一个元素一样工作。

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

---

更新： Apple 以及 Safari 不打算实现此功能。但是，有一些 Polyfill 可以使其在所有当前浏览器上工作。