2

当前开发的 Web 组件规范的一部分是可以创建自己的 HTML 元素，例如通过调用 new 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.

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

4

2 回答 2

4

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

要使用新的本机继承自定义元素，您需要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')
于 2013-05-14T15:26:10.670 回答
2

我不能谈论 x-tags polyfill for 的细节document.register()，但是在原生实现中看起来是这样的：

<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>

此示例适用于 Chrome Canary 28。您当前需要打开“启用实验性 WebKit 功能”标志about:flags才能获得document.webkitRegister().

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

于 2013-05-07T23:57:39.370 回答