从其构造函数创建元素（不知道元素标签）答案

【问题标题】：Create element from its constructor (without knowing the element tag)从其构造函数创建元素（不知道元素标签）
【发布时间】：2022-01-24 11:38:56
【问题描述】：

如果你有它的构造函数但不知道它的标签名，是否可以创建一个元素？

例子：

class CustomElement extends HTMLElement {}
customElements.define(genRandomString(), CustomElement);

是否可以创建CustomElement 的新实例？或者你可以通过任何方式获取它的标签名称吗？

我问这个是因为我不确定将自定义元素传递给需要它们的函数的正确方法是什么：我是否需要同时传递名称和构造函数，以防万一需要创建一个元素（需要名称）还是检查现有元素是否属于这种类型（需要构造函数）？

【问题讨论】：

为什么不直接做new CustomElement？
为什么不添加一个静态属性类 CustomElement extends HTMLElement { public static tagName = "i-am-a-tag"; } 然后使用这个 tagName 我们可以检查它是否存在
@Dreamweaver 旁注：这不是 Typescript 问题，因此没有 public。
new CustomElement() 不适合我。我意识到我没有在customElements.define 注册它。注册后，它现在可以工作了。

【解决方案1】：

如果你有它的构造函数但不知道它的标签名，是否可以创建一个元素？

如果你可以访问构造函数（就像你说的那样），你可以使用

const instance = new CustomElement();

请注意，如果constructor 不符合Custom Element constructor constraints，这可能会失败。

【讨论】：

【解决方案2】：

这是你要求的吗：

let foo = "bar";
window[ genRandomString() ] = foo;

然后你想知道getRandomString产生了什么？

只有当你监控window时，你才能捕捉到添加到其中的内容。

WebComponents 也一样，只有hook到customElements.define 才能记录使用的名称。
换句话说：弄乱它的prototype 并可能破坏它的默认执行。

但这仅在您控制的那一刻起有效；那时您可能已经错过了所有已创建的 Web 组件。

您能解释一下为什么要这样做吗？

【讨论】：