使用 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 中的代码以获得本机输入和 select 元素提供的功能。

我是否忽略了某些方面？

Answer 1

您没有理由不能将选项 A 和选项 B 结合起来，这样您就可以从 HTMLInputElement 开始使用基础 class 进行扩展，然后使用更具体的 class 进行扩展]稍后。

class BasicCustomHTMLElement extends HTMLInputElement {
}

class CustomInput extends BasicCustomHTMLElement {
}

如果您想要一组共享功能来扩展许多内置 classes，您可以使用 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 组件创建自定义输入

Creating a custom input with Web Components

javascript

web-component

native-web-component