擴展另一個自定義元素？

Question

嘗試擴展自定義元素：

 class ABC extends HTMLDivElement { connectedCallback() { console.log('ABC here') } } customElements.define("x-abc", ABC, { extends: 'div' }) class XYZ extends ABC { connectedCallback() { console.log('XYZ here') } } customElements.define("x-xyz", XYZ, { extends: 'x-abc' })

 <div is="x-abc"></div> <div is="x-xyz"></div>

但收到此錯誤：

 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "x-abc" is a valid custom element name

錯誤令人困惑，因為它說“有效”，而不是“無效”！

另一方面，FF 說：

  Uncaught DOMException: CustomElementRegistry.define: 'x-xyz' cannot extend a custom element

我想建立自定義元素的層次結構。

Answer 1

這個錯誤起初可能聽起來令人困惑，但實際上它非常清楚。 規范明確定義您只能使用is語法擴展內置函數。 按照目前的設計，使用ABC作為基礎 class 絕對不是最聰明的想法（除非您放棄擴展HTMLDivElement以支持HTMLElement ）。

您還沒有解釋為什么需要擴展div元素，這絕對不是您通常構建組件層次結構的基礎。 Safari 甚至不（可能永遠不會）支持它。

相反，擴展HTMLElement並省略is -syntax。

 class ABC extends HTMLElement { connectedCallback() { console.log('ABC here') } } customElements.define('x-abc', ABC) class XYZ extends ABC { connectedCallback() { super.connectedCallback(); console.log('XYZ here') } } customElements.define('x-xyz', XYZ)

 <x-abc></x-abc> <x-xyz></x-xyz>

如果出於某種奇怪的原因您需要繼續擴展HTMLDivElement （而不是HTMLElement ，這將是正確的方法），這里是 go：

只需將{extends: 'x-abc'}部分替換為{extends: 'div'} 。

您的兩個組件都擴展了div （它們的定義標簽名稱）。

 class ABC extends HTMLDivElement { connectedCallback() { console.log('ABC here') } } customElements.define('x-abc', ABC, { extends: 'div' }) class XYZ extends ABC { connectedCallback() { super.connectedCallback(); console.log('XYZ here') } } customElements.define('x-xyz', XYZ, { extends: 'div' })

 <div is="x-abc"></div> <div is="x-xyz"></div>

Answer 2

實際上，選項名稱 extends:"xxx" 令人困惑。 由於擴展的內置元素必須使用該內置元素的標記進行 html 標記（伴隨 is 屬性），因此此選項不確定直接祖先（“擴展”它）（這是由類定義的-構造函數鏈），而是定義標簽名稱，在解析 html/升級元素時使用給定的構造函數（連同整個鏈）。 嚴格來說，它確實擴展了該標簽的 class，但不是直接擴展。 “擴展”的意思，與 html is="xxxx" 語法更相關。 想想它，因為它會有一些名稱，如 basetag、builtintag、markuptag、builtinbase 等。