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 ist的问题是我没有主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) {
}

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

使用Web组件创建自定义输入

1 个答案: