如何在不实例化的情况下获得自定义元素定义？答案

【问题标题】：How do I get a custom element definition without instantiating it?如何在不实例化的情况下获得自定义元素定义？
【发布时间】：2014-11-17 19:32:53
【问题描述】：

查看custom element spec 后，我如何在不先实例化自定义元素定义的情况下获得对它的引用并不立即显而易见（这可能会出现问题）。有没有办法直接引用自定义元素的原型？

更具体地说，如果我有：

var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() { // some heavy operation };
document.registerElement('x-foo', {prototype: proto});

稍后，我想引用原型，例如：

// wish
var XFoo = document.getElementDefinition('x-foo');

但我想出的唯一方法是：

// reality
var XFoo = document.createElement('x-foo').__proto__;

这在尝试编写针对重型组件的测试时尤其成问题 - 因为没有办法消除重型行为（在实际调用原始方法之前使用 XFoo.createdCallback = // stub; 之类的东西。

【问题讨论】：

由于原型被所有实例共享，只需在某处保留对该对象的引用即可。
@Pointy 肯定会起作用。当外部库代表我注册组件时（例如 Google Polymer），这会更加困难。所以问题仍然存在：当我无法控制registerElement 代码时，如何查找定义？这就是我在这里寻找的核心。

标签： unit-testing reference web-component stub custom-element

【解决方案1】：

如果你引用了自定义元素的构造函数，你可以使用它来访问原型。

var XFoo = document.registerElement('x-foo', {prototype: proto});
XFoo.prototype // this will give u access to the prototype object.

【讨论】：

【解决方案2】：

没有办法消除严重的行为

使用函数引用而不是匿名函数：

proto.createdCallback = model.foo;

定义它：

var model = {};
model.foo = function(){/*some heavy operation*/};

然后通过重新定义将其存根：

var XModel = {};
XModel.foo = function(){/*stub*/};

并在测试中引用它：

XFoo.createdCallback = XModel.foo;

参考文献

【讨论】：