Javascript 如何使用Web组件创建自定义输入类型？

HTML5：数字、颜色、日期时间。 AngularJS与polyfills捆绑在一起，用于其中一些

我正在寻找一些可用的方法来创建自定义类型的输入，使用Web组件或HTML的另一个标准化部分。已经有一个WSER，但我不想使用任何外部库

UPD:

来自HTML5的自定义类型示例

• 具有自定义验证的类型，如电子邮件和电话
• 具有不同视图（如date和datetime）的类型
• 具有自定义语义和/或类似样式搜索的类型

---

但只需添加您自己的属性即可

<input type="custom" name="reg_code" /> 

thin有javascript为您验证这一点

或者，您可以使用该属性将自己的输入类型指定为

例如：

<input type="text" type="tel" pattern="[0-9]{9}">

及

更新：一个名为注册码的新自定义输入类型，采用WEK070605格式

  <input  pattern="[A-Z]{3}[0-9]{6}" required ">

---

使用Web组件，您可以定义一个自定义元素，该元素将扩展
HTMLInputElement
原型

这显示了一个（非常基本的）示例：

请提供一个自定义输入类型的示例？它提供了什么用途？在我看来，我认为这是为了验证目的和方便过滤。在大多数情况下，这将需要一个外部库来处理。如果要使用您创建的特定类型，那么我认为您还需要提供自己的脚本来验证它。此外，实际上只有一两个浏览器支持新的输入类型，比如Chrome，而Firefox不支持@Joraid“您还需要提供自己的脚本来验证它。”当然。@Joraid“此外，实际上只有一两个浏览器支持新的输入类型“它会改变。我要找的不是它。”。你不能用你发布的方式创建外观和/或行为完全不同的输入类型。是的，我似乎误解了你的问题。不同的外表和行为？像不是文本输入？请提供一个示例或完整的场景，说明这种自定义输入的行为。
  <input  pattern="[A-Z]{3}[0-9]{6}" required ">

var XComponent = document.registerElement('x-component', {
  extends: 'input',
  prototype: Object.create(HTMLInputElement.prototype)
});