使用 Web 組件創建自定義輸入

Question

我想用 Web 組件創建我自己的 HTML 元素集，它們都包含一些基本功能。 我想從輸入開始，似乎有兩種可能性：繼承自HTMLElement或繼承自HTMLInputElement 。

選項A：

class BasicCustomHTMLElement extends HTMLElement {
  //basic functionality
}

class CustomInput extends BasicCustomHTMLElement {
  let shadow = this.attachShadow({
    mode: 'open'
  });

  let textbox = document.createElement("input");
  shadow.appendChild(textbox);
}

選項 B

class CustomInput extends HTMLInputElement {

}

我對選項 B 的問題是，我沒有可以定義基本功能的主class 。 另一方面，我必須重寫選項 A 中的代碼以獲得本機輸入和選擇元素提供的功能。

有沒有我忽略的方面？

Answer 1

沒有理由不能將選項 A 和選項 B 結合起來，以便您最初使用基類從HTMLInputElement擴展，然后使用更具體的類擴展它。

class BasicCustomHTMLElement extends HTMLInputElement {
}

class CustomInput extends BasicCustomHTMLElement {
}

如果你想要一組共享的特性來擴展一些內置類，你可以使用mixins 。

const BaseClassMixin = (superclass) => class extends superclass {
};

class CustomInput extends BaseClassMixin(HTMLInputElement) {
}

class CustomTextArea extends BaseClassMixin(HTMLTextAreaElement) {
}

但是，目前只有 Chrome 支持擴展內置元素，因此不建議在實際使用中使用。