擴展自定義 webcomponent

Question

我在將自定義 Web 組件擴展到另一個時遇到了一些問題。 我目前收到以下錯誤： Uncaught ReferenceError: LinkedProducts is not defined

我有兩個班級，在他們的每個文件中。 它們都包含在 Parcel 的構建中，我可以在編譯的 JS 中檢查它們是否存在，並且LinkedProducts確實在構建中出現在ProductItem之前。

class LinkedProducts extends HTMLElement {
 constructor() {
  super();
 }
}

customElements.define('linked-products', LinkedProducts);

class ProductItem extends LinkedProducts {
 constructor() {
  super();
 }
}

customElements.define('product-item', ProductItem);

我的go這個哪里錯了？

Answer 1

一切都與秩序有關：

 class LinkedProducts extends HTMLElement { constructor() { super(); } } customElements.define('linked-products', LinkedProducts); class ProductItem extends LinkedProducts { connectedCallback(){ this.innerHTML = "Hello " + this.nodeName; } } customElements.define('product-item', ProductItem);

 <product-item></product-item>

或更緊湊/不同：

 customElements.define('linked-products', class extends HTMLElement { connectedCallback(){ this.innerHTML = "Hello " + this.nodeName; } }); customElements.define('product-item', class extends customElements.get("linked-products") {});

 <product-item></product-item>