3

我想用 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 的问题是，我没有 main class，我可以在其中定义基本功能。另一方面，我必须为原生输入和选择元素提供的功能重写选项 A 中的代码。

我是否忽略了某些方面？

4

1 回答 1

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 支持扩展内置元素，因此不建议在实际使用中使用。

于 2019-03-01T01:16:14.113 回答