javascript - Web 组件 : inheriting from DOM prototypes

Question

当前开发的 Web 组件规范的一部分是能够创建自己的 HTML 元素，例如通过调用新的 document.register。这里给出了一个例子:https://github.com/mozilla/web-components/blob/master/demo/demo.html

如您所见，一个新的 x-bar 元素是通过从 HTML span 元素的原型(prototype)继承其原型(prototype)而创建的。

现在我在 Firefox Nightly 中尝试了以下操作(顺便说一句，有 document.register 支持):

var x = Object.create(HTMLInputElement.prototype);

我一直认为这将是扩展/自定义普通 input 元素的行为或外观的第一步。

但是，当我运行类似 x.value 的程序时，浏览器的 Javascript 引擎会抛出一个 TypeError: Value does not implement interface HTMLInputElement。

现在我有点卡住了。是当前实现或规范的限制？

Answer 1

Marc，你遇到这个麻烦的原因是，当你从一个现有的原生元素继承来创建一个新的自定义元素时，你需要使用extends属性document.register(TAG_NAME, OPTIONS) 选项对象的一部分，以传入您想要继承的所需标签名称。

要使用新的原生继承自定义元素，您需要在标记中以声明方式写出元素时使用 is="" 语法 - 尽管使用 JS，这就像创建任何其他元素 - 下面的示例。这是两个 polyfill，试一试，让我知道结果如何:Mozilla - https://github.com/mozilla/web-components/blob/master/src/document.register.js - 谷歌:https://github.com/toolkitchen/CustomElements

定义与注册

document.register('x-input', {
  extends: 'input',
  prototype: Object.create(HTMLInputElement.prototype, { ... })
});

在 HTML 中的用法

<input is="x-input" />

通过 JavaScript/DOM 使用

document.createElement('x-input')