javascript - 使用 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 的问题是，我没有主类，我可以在其中定义基本功能。另一方面，我必须重写选项 A 中的代码以获得 native 输入和选择元素提供的功能。

我是否忽略了某些方面？

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) {
}

但是，目前only Chrome supports extending built-in elements因此不建议在现实世界中使用。