Web 组件：从 DOM 原型继承

Question

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

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

现在我在 Firefox Nightly 中尝试了以下操作（顺便说一下，支持 document.register）：

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

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

但是，当我运行 x.value 之类的东西时，浏览器的 Javascript 引擎会抛出 TypeError: Value does not implement interface HTMLInputElement。

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

Answer 1

Marc 遇到此问题的原因是，当您从 现有的原生元素 继承来创建新的自定义元素时，您需要使用 document.register(TAG_NAME, OPTIONS) 的 extends 属性选项对象传递您想要继承的所需标签名称。

要使用新的本机继承自定义元素，在标记中以声明方式写出元素时，您需要使用is="" 语法 - 尽管使用 JS，这就像创建任何其他元素一样 - 示例如下。这是两个 polyfill，试一试，告诉我效果如何：Mozilla - https://github.com/mozilla/web-components/blob/master/src/document.register.js - Google: 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')

Answer 2

我无法透露 document.register() 的 x-tags polyfill 的详细信息，但在本机实现中看起来是这样的：

<script>
  var XFooProto = Object.create(HTMLInputElement.prototype);

  // Define its JS API.
  XFooProto.showVal = function() {
    alert(this.value);
  };

  var XFoo = document.webkitRegister('x-foo', {prototype: XFooProto});

  var xfoo = document.createElement('input', 'x-foo');
  xfoo.value = 50;

  xfoo.addEventListener('click', function(e) {
    e.target.showVal();
  });

  document.body.appendChild(xfoo);   
</script>

此example 在 Chrome Canary 28 中工作。您目前需要在about:flags 中翻转“启用实验性 WebKit 功能”标志才能获得document.webkitRegister()。

我怀疑如果你用 FF polyfill 做类似的事情，事情可能会解决。如果您有兴趣使用 <element> 和/或使用其他 Web 组件规范创建自定义元素，也可以查看 https://github.com/toolkitchen 的 polyfill。