创建原生Web Component时遭遇意外的Uncaught TypeError: Illegal constructor错误

问题原因 #

你遇到的错误并非来自Wrapper的实例化，而是浏览器的自定义元素自动升级机制触发的：

1. 调用document.createElement("magic-component")时，该元素属于HTMLUnknownElement——此时还未定义对应的自定义元素。
2. 随后执行customElements.define("magic-component", HTMLElement)，浏览器会自动尝试把DOM中已存在的所有<magic-component>元素升级为自定义元素实例。
3. 但HTMLElement不能直接作为自定义元素的类使用：自定义元素要求必须继承自HTMLElement的子类，且构造函数需满足规范（比如必须调用super()、不能带参数等）。浏览器尝试用HTMLElement构造实例时，就会抛出"Illegal constructor"错误。

解决方案 #

方案1：先定义合法自定义元素，再创建实例

调整代码顺序，确保先完成自定义元素的定义，再创建元素。同时必须使用HTMLElement的子类作为自定义元素的类：

class Wrapper {
  constructor(elementName) {
    // 先检查并定义合法的自定义元素类
    if (!customElements.get(elementName)) {
      // 定义继承自HTMLElement的子类
      class CustomElement extends HTMLElement {}
      customElements.define(elementName, CustomElement);
    }
    // 再创建元素
    this.el = document.createElement(elementName);
  }
}

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

方案2：绕过自动升级（不推荐）

如果确实需要先创建元素再定义，可通过customElements.whenDefined等待定义完成后手动处理，但这种方式不符合自定义元素设计规范，仅作参考：

class Wrapper {
  constructor(elementName) {
    this.el = document.createElement(elementName);
    if (!customElements.get(elementName)) {
      class CustomElement extends HTMLElement {}
      customElements.define(elementName, CustomElement);
      // 等待定义完成后手动处理元素
      customElements.whenDefined(elementName).then(() => {
        if (!this.el.isConnected) {
          document.body.appendChild(this.el);
        }
      });
    } else {
      document.body.appendChild(this.el);
    }
  }
}

let wrapper = new Wrapper("magic-component");

关键规范提醒 #

自定义元素的核心要求：

• 必须继承自HTMLElement（或其内置子类，如HTMLButtonElement）
• 构造函数必须调用super()，且不能包含任何参数
• 构造函数内禁止设置属性、添加子元素（此类操作应放在connectedCallback生命周期钩子中）

内容的提问来源于stack exchange，提问作者Edgar Derby