Question

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

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

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

例如，我可以使用'div'元素执行此操作：

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

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

Answer 1

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

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

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

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

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

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

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

在开发规范时，我们考虑在窗口自动化上设置对这个构造函数的引用，但决定了更少的魔法和更少的名称污染更好。我们还考虑添加一个对象，您可以传递标记名称并返回正确的构造函数。我们希望为内置元素和自定义元素提供支持。不幸的是，该提案在标准讨论清单中没有存在。

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

HTH！

Answer 2

我在register上找不到多少，并且在registerElement上发现很少，但是如果它遵循JavaScript原型继承的其余部分，那么你应该能够保存提供原型和稍后修改，例如：

var saveMe = {};
document.register('bar-foo', saveMe);
saveMe.prototype = {
    // ...
}

Answer 3

首先，除非您使用platform.js，否则这根本不会起作用，但如果您使用https://api.dartlang.org/apidocs/channels/be/dartdoc-viewer/dart-dom-html.HtmlDocument#id_registerElement，则必须在调用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）根据{{3}}，registerElement调用不会返回值。 Platform.js符合此要求。如果有的话，请不要使用返回值（例如，在chrome上）。

2）从platform.js 0.4.0开始，一些浏览器支持调用registerElement，然后然后回溯添加对原型的调用。对于IE10，这显然是不支持。

更改自定义元素的原型

3 个答案: