4

如果我按如下方式创建自定义元素

document.register('bar-foo', { prototype: { .... } }); // or document.registerElement

现在，在此之后我想添加一些该元素的原型。

例如，我可以使用 'div' 元素来做到这一点：

HTMLDivElement.prototype.bar = function() {};
document.createElement('div').bar();

我将如何使用我的自定义元素 'bar-foo' 做到这一点？

4

3 回答 3

2

首先，除非您使用的是platform.js，否则这根本不起作用，但如果您是，则必须在调用 registerElement之前绑定自定义 api。

var prototype = Object.create(HTMLElement.prototype);
prototype.createdCallback = function() {
  ...
};
prototype.mycall = function() {
  console.log(this.shadowRoot.innerHTML);
};
document.registerElement('my-type', { prototype: prototype });

然后，您将能够执行此操作：

<my-type>100</my-type>
<script>
  document.getElementById('foo').mycall();
</script>

注意两点：

1）根据https://api.dartlang.org/apidocs/channels/be/dartdoc-viewer/dart-dom-html.HtmlDocument#id_registerElement， registerElement 调用不返回值。Platform.js 符合这一点。如果有返回值（例如在 chrome 上），请不要使用返回值。

2) 从 platform.js 0.4.0 开始，一些浏览器支持调用 registerElement ，然后追溯添加对原型的调用。IE10尤其不支持此功能。

于 2014-08-29T08:57:43.313 回答
2

我在 Chrome 中实现了自定义元素，所以我对此很熟悉。（FWIWdocument.register已重命名document.registerElement。）

稍后要向自定义元素的原型添加内容，首先需要对原型对象的引用。

在您的问题中，您通过 DIV 的构造函数访问原型，HTMLDivElement.prototype. 您可以在自定义元素中使用类似的模式。自定义元素的构造函数从 registerElement 返回。通过保存对它的引用，您可以稍后使用它来访问原型：

BarFoo = document.registerElement('bar-foo', ...);

// later
BarFoo.prototype.foo = ...

（您也可以使用返回的对象，规范调用生成的构造函数来使用 .）创建元素new BarFoo()。）

将引用保存在全局对象（窗口）上是有意义的，因为这是 HTMLDivElement 等内置元素的工作方式，尽管您不必这样做。

在开发规范时，我们考虑过在窗口自动设置对此构造函数的引用，但认为少一些魔法和少一些名称污染会更好。我们还考虑添加一个对象，您可以传递标签名称并取回正确的构造函数。我们想让内置元素和自定义元素都可以使用。不幸的是，该提案并没有在标准讨论列表中存活很长时间。

还有其他方法可以做你想做的事。例如，您可以直接保存对原型的引用，而不是保存对生成的构造函数的引用。或者，如果您有自定义元素的实例，您可以使用Object.getPrototypeOf(elem)或elem.__proto__获取原型对象。

！

于 2014-01-27T22:53:28.530 回答
1

我在 上找到的不多register，在 上也很少找到registerElement，但如果它遵循 JavaScript 原型继承的其余部分，您应该能够保存提供原型的对象并在以后修改它，例如：

var saveMe = {};
document.register('bar-foo', saveMe);
saveMe.prototype = {
    // ...
}
于 2014-01-14T20:05:30.917 回答