Question

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

正如我们所看到的，通过使其原型继承自HTML span元素的原型来创建新的x-bar元素。

现在我在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属性{ {1}}选项对象传递您想要继承的所需标记名称。

要使用新的本机继承自定义元素，在标记中以声明方式写出元素时，需要使用document.register(TAG_NAME, OPTIONS)语法 - 尽管使用JS，它就像创建任何其他元素一样 - 下面的示例。以下是两个polyfill，尝试一下，让我知道它是如何工作的：Mozilla - https://github.com/mozilla/web-components/blob/master/src/document.register.js - Google：https://github.com/toolkitchen/CustomElements

定义＆amp;注册

is=""

HTML中的使用

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

通过JavaScript / DOM使用

<input is="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>和/或使用其他网络组件规范创建自定义元素，也可以在https://github.com/toolkitchen查看polyfill。

Web组件：继承自DOM原型

2 个答案: