'extends'選項是否允許我直接將<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的上下文：

• 里面的元素。
• 里面的ul元素。

但是驗證器不知道我是從<ol>元素開始擴展的。 是否存在extends: 'ol'允許我將<li>元素直接添加到我的組件中，或者我是否還需要提供<ol>包裝器？

---

注意：這個問題非常類似於使用`<custom-tag>而不是`<ul>`或`<ol>`來創建列表 ，但是在定義新的自定義元素時沒有提到extends選項。 出於這個原因，我認為適合創建一個新問題而不是潛在地破壞那個問題的含義。

Answer 1

根據規范，Custom Elements將能夠最終擴展其他元素。 但現在不是時候。

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

警告：在撰寫本文時，沒有瀏覽器實現自定義的內置元素（ 狀態 ）。

但這並不妨礙您的自定義元素像其他元素一樣。

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

Answer 2

是的，它適用於{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 。