Web组件：继承DOM原型

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

如可以看到的，一个新的x-bar元件由具有其原型从HTML跨度元件的原型被继承创建。

现在我试着在Firefox每晚以下（含document.register支持，顺便说一句）：我一直在想，这将是在延长/自定义的行为或外观的第一步

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

普通input元素。

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

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

来源

2013-05-07 Marc

下面的两个答案对我了解自定义元素如何扩展现有元素类型以及如何对这种行为进行多边填充非常有帮助。由于我只能接受一个答案，我不得不作出选择。我接受了csuwldcat的回答，因为他给了我Firefox的预发布版本实际上已经坏掉的提示（其奇怪的行为是我最初的问题基本归结为什么）。 – Marc 2013-05-15 08:46:28

你有这样的烦恼马克，究其原因是因为当你从继承现有的本地元素来创建新的自定义元素，你需要使用的document.register(TAG_NAME, OPTIONS)选项extends属性对象在期望的变量传递你想继承的名字。

要使用新的本地继承自定义元素，在标记中声明式地写出元素时需要使用is=""语法 - 尽管使用JS，它就像创建任何其他元素一样 - 下面的示例。下面是这两个polyfills，给他们一个尝试，让我知道它是如何工作的：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')

来源

2013-05-14 15:26:10 csuwldcat

感谢您的输入！我目前正在尝试。您的代码可以与当前稳定版本的Firefox一起使用您的polyfill。但是，带有自己的document.register的Firefox的主干版本仍然不起作用。（因为document.register已经存在，所以我猜这个polyfill在这种情况下什么也不做） – Marc 2013-05-14 18:08:56

你的例子也可以在Chrome 28中使用document.webkitRegister并且没有任何polyfill，这在最新的Firefox中看起来像是一个不恰当的实现。 – Marc 2013-05-14 18:37:05

@Marc yup，在Firefox的预发布版本中提供的document.register（）的早期实现非常陈旧，并且不能正常工作 - 但会很快更新（现在我们正在完成规范）。当您打开Firefox预发布版本中的Web组件的pref时，它会添加旧版本，X-Tags尝试使用（作为一个polyfill应该），并显示为结果。但是，如果禁用它，我们的document.register（）填充和X-Tag在Firefox中可以正常工作。 – csuwldcat 2013-05-14 20:28:12

我不能到X标记填充工具的细节说话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>

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

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

来源

2013-05-07 23:57:39 ebidel

请注意，我的问题与x-polyfill本身无关;我只是用他们的演示代码来激励。 – Marc 2013-05-10 09:46:15

我试过你的例子，它在Firefox Trunk中不起作用，因为xfoo只是一个普通的输入元素。事实上，在你的代码中，你正在通过调用createElement来创建xfoo，它接收'input'作为它的第一个参数。是不是第二个参数'x-foo'简单地被忽略，因为createElement只是为一个元素定义的？ – Marc 2013-05-10 09:48:41

好吧，让你的例子在Chrome 28中工作，这显然是尊重document.createElement的第二个参数。顺便说一下，这是有记录的地方吗？ – Marc 2013-05-14 18:26:44

Web组件：继承DOM原型

回答

相关问题