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

【问题标题】：Does the 'extends' option allow me to directly add <li> elements to a custom element, if extending from an <ul> or <ol>?如果从 <ul> 或 <ol> 扩展，“扩展”选项是否允许我直接将 <li> 元素添加到自定义元素？
【发布时间】：2018-04-10 09:46:06
【问题描述】：

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

【问题讨论】：

标签： javascript html custom-element

【解决方案1】：

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

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

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

但这并不妨碍您的自定义元素像另一个元素一样工作。

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

【讨论】：

这是正确的答案。不幸的是，Apple 或多或少地阻止了[is] 的实现。

【解决方案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。

【讨论】：