Question

使用Web组件规范，是否可以扩展特定类型的<input>元素？

This question与我的相似，但它仅指定如何扩展button元素，而不是文本输入或<input>标记的任何其他变体。

在我的情况下，我想扩展一个复选框（<input type="checkbox" />）或一个单选按钮（<input type="radio" />），以便围绕相同的核心输入元素功能包装更复杂的UI，但是我使用extends提供的document.registerElement语法，没有任何方法可以做到这一点。在我看来，您似乎应该能够执行以下操作：

document.registerElement('x-checkbox', {
    prototype: Object.create(HTMLInputElement.prototype),
    extends: 'input[type=checkbox]'
});

然而，这个具体案例似乎没有记录或解释我可以找到的任何地方，而且我相信这个例子在实践中不起作用。

Answer 1

如果要扩展另一个标准HTML元素，则必须使用is属性。由于没有“复选框”元素，因此您无法扩展input[type=checkbox]或radio等内容。扩展input元素（HTMLInputElement）并在createdCallback中指定类型：

<body>
    <input is="totally-not-checkbox">   <!-- Custom Checkbox #1 -->
</body>

var proto = Object.create(HTMLInputElement.prototype);
proto.createdCallback = function() {
    this.type = "checkbox";
    this.addEventListener("change", this.toggleZoom);
};
proto.toggleZoom = function(){
    $(this).toggleClass("zoom");                        //FYI $ is jQuery
};

var nCB = document.registerElement("totally-not-checkbox", {
    prototype: proto,
    extends: 'input'
});

document.body.appendChild(new nCB());  //Custom Checkbox #2

演示：http://jsfiddle.net/DerekL/5utco0en/

由于自定义元素从HTMLInputElement扩展，因此继承了所有原始属性和方法。看一下这个演示：http://jsfiddle.net/DerekL/6gtLp8p5/

proto.toggleZoom = function(e){
    $(this).toggleClass("zoom");
    console.log(this, this.checked);
};

this.checked将返回正确的checked值，就像原始复选框一样。

Answer 2

6 年后，

我已经创建了自己的。 https://elements-x.com/component/input/text 它使用自定义设计和下拉菜单包装 <input> 标签，并支持以下类型。

文字
日期
时间
复选框
收音机
颜色
文件
切换

Answer 3

您可以使用jQuery（http://jqueryui.com/widget/）创建自己的小部件，并通过使用jQuery调用（甚至是javascript常用调用）修改DOM来创建所需的HTML。

自定义元素可以扩展输入元素吗？

3 个答案: