javascript - document.registerElement 扩展 HTMLInputElement 原型(prototype)，同时使用自定义标签名称以避免隐式浏览器样式

Question

我的目标有两个:

• 显示一个 HTML 元素，该元素跟踪其“已检查”状态并触发“更改”事件，而无需自己手动实现该代码。

• 不与浏览器的元素隐式样式冲突 -webkit-appearance: none还有更多的麻烦。

我只需要支持 Google Chrome 当前稳定的 channel 。因此，我不太关心与非现代浏览器的兼容性。

我已经使用 document.registerElement 解决了这个问题。通过这种方法，我注册了一个新标签 custom-checkbox ，并通知浏览器我希望此标记继承自输入。

从那里，我需要设置这个输入的类型是复选框。为此，我将其类型设置为 createdCallback创建 HTML 元素时运行的方法。

这段代码有一些问题:

• 当我不使用自定义标签而是利用 is 时，它会起作用。属性来通知浏览器输入"is"custom-checkbox 。但是，使用 <input>标签使浏览器接管元素的样式。我不希望这种情况发生。

• 使用自定义标记时，createdCallback方法未运行。因此，该元素不会设置它是一个复选框的事实，并且在单击时不会触发“更改”事件。

我错过了什么？

var proto = Object.create(HTMLInputElement.prototype);
proto.createdCallback = function() {
  console.log('createdCallback has ran for: ', this);
  this.type = "checkbox";
};

document.registerElement("custom-checkbox", {
  prototype: proto,
  extends: 'input'
});

$('.custom-checkbox').change(function() {
  console.log('change event handler has ran for:', this);
});

.custom-checkbox {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

<custom-checkbox class="custom-checkbox"></custom-checkbox>

<input is='custom-checkbox' class="custom-checkbox">

Answer 1

我可以重复您的问题，其中 createdCallback插入 <custom-element> 时，方法不会触发标记到使用 HTML 声明的页面上。我使用的是 Chrome 版本 39.0.2171.99

我相信这是因为当我的 <custom-element>渲染后，事件监听器createCallback尚未绑定(bind)。

请记住，自定义元素尚未成为定义的标准 ( see this )

但是，使用Polymer使用 HTML 中的自定义标签为我解决了这个问题确实会触发 Polymer 所说的 create事件/回调。

我建议您使用Polymer ，它有更好的浏览器支持。