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的上下文：


内部元素。

内部ul元素。

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

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

Answer 1

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

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

警告：在撰写本文时，没有任何浏览器实现过自定义的内置元素（status）。

但这并不妨碍您的自定义元素像其他元素一样。

只需查看所有必需的ARIA属性以及您需要的CSS以及它。

Answer 2

是的，它适用于{extends: 'ol'}。

但不要忘记使用带有is属性的原始元素标记定义自定义内置元素。

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

此外，您的课程必须延长HTMLOListElement：

class MyElement extends HTMLOListElement {...}

它适用于natively with Chrome version 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>

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

＆＃39;延伸＆＃39;选项允许我直接将<li>元素添加到自定义元素，如果从<ul>或<ol>扩展？

2 个答案: