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

我想用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中的代码

有一些方面我忽略了吗？
没有理由不能将选项A和选项B结合起来，以便从
HTMLInputElement
开始使用基类进行扩展，然后使用更具体的类进行扩展

class BasicCustomHTMLElement extends HTMLInputElement {
}

class CustomInput extends BasicCustomHTMLElement {
}

如果您想要一组共享的功能来扩展许多内置类，您可以使用

但是，目前不建议在现实世界中使用它。
您可以定义一个单独的助手类，并在自定义输入对象中使用它。该网站将在嵌入式Chromium浏览器中运行。计划在1年内在“普通”浏览器上运行。你认为我还是应该避免扩展本机内置元素吗？实际上Firefox也实现了它们。只有Safari不打算这样做我的观点是，我希望基类不仅用于输入，还用于标签、文本区域、选择等。Safari说他们永远不会提供它，所以理论上，如果你想支持Safari，就不能扩展内置元素。虽然您可能会有一些运气使用。我添加了一个使用mixin的示例。
const BaseClassMixin = (superclass) => class extends superclass {
};

class CustomInput extends BaseClassMixin(HTMLInputElement) {
}

class CustomTextArea extends BaseClassMixin(HTMLTextAreaElement) {
}