Vanilla JavaScript 自定義元素類型錯誤

Question

我的問題是關於為自定義元素擴展 HTMLElement。

class Foo extends HTMLElement { ... }

class Bar extends Foo { ... }

class FooBar extends Bar { ... }

他們每個人都在構造函數中調用 super() 。

當我用 Bar 定義自定義元素時，我沒有收到任何錯誤

customElements.define( 'custom-tag', Bar );
or
customElements.define( 'custom-tag', class Bar extends Foo { ... } );

我正在嘗試使用 FooBar 類定義自定義元素。

customElements.define( 'other-custom-tag', FooBar );
or
customElements.define( 'other-custom-tag', class FooBar extends Bar { ... } );

但我得到

Uncaught TypeError: Failed to execute 'define' on 'CustomElementRegistry':
The provided value cannot be converted to a sequence.

通過 Mozilla 文檔

https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define

TypeError   The referenced constructor is not a constructor.

我找不到與此問題相關的任何內容...

Answer 1

問題很可能是static get observedAttributes() - 在我的情況下，我有一個愚蠢的錯字，使用push返回新數組元素的計數而不是數組本身（替換為concat ，就像一個魅力）。

換句話說，只要確保靜態 getter 返回一個數組就可以了 😃