在创建新的香草 Web 组件时出现意外的`Uncaught TypeError: Illegal constructor`

Question

我正在测试 JavaScript Web Components API 的限制，我遇到了一个有趣的问题。

我在 HTMLElement 对象周围有以下包装器：

export class Wrapper {
  public el: HTMLElement;

  constructor(elementName: string) {
    this.el = document.createElement(elementName);
    customElements.get(elementName) ||
      customElements.define(elementName, HTMLElement);
  }
}

我使用这个实现是因为 HTMLElement 有一系列我想绕过的限制，例如构造函数必须为空。

然后，我实例化包装器并将实际元素附加到 DOM：

let wrapper = new Wrapper("magic-component")
document.body.appendChild(wrapper.el);

令我惊讶的是，这引发了以下错误：

未捕获的类型错误：非法构造函数

看起来当自定义元素在通过

new

定义之前通过

customElements.define()

创建时会发生此错误。但是，这里不是这种情况：this.el定期通过

document.createElement()

创建，然后通过

定义customElements.define()

。只有包装器是通过

new

创建的。