JavaScript如何通过class继承HTMLElement创建自定义元素

完全可以，这是浏览器原生Custom Elements API提供的标准能力，按照规范完成注册后，调用document.createElement创建对应标签时，返回的元素实例构造函数就是你自定义的类。

具体实现步骤 #

• 第一步：定义继承自HTMLElement的自定义元素类，构造函数内必须第一行调用super()执行父类初始化逻辑，你可以在类内编写自定义方法、生命周期回调：

class HTMLHelloElement extends HTMLElement {
  constructor() {
    super();
    // 可在此编写初始化逻辑，比如创建Shadow DOM、绑定事件、初始化默认属性
  }

  // 标准生命周期回调：元素被插入DOM树时触发
  connectedCallback() {
    console.log('自定义hello元素已插入页面');
  }
}

• 第二步：调用全局customElements.define()方法，将自定义类和指定标签名做绑定。注意：自定义元素标签名必须包含至少一个短横线（-），这是W3C规范的强制要求，用来避免和未来新增的原生HTML标签产生命名冲突，因此你示例中使用的hello不符合命名规则，需要调整为my-hello、x-hello这类带短横线的名称：

// 注册自定义元素，完成标签名和类的映射
customElements.define('x-hello', HTMLHelloElement);

• 第三步：注册完成后再调用document.createElement创建对应标签，得到的元素就会是你自定义类的实例：

const helloEl = document.createElement('x-hello');
console.log(helloEl.constructor === HTMLHelloElement); // 输出: true
console.log(helloEl instanceof HTMLUnknownElement); // 输出: false
console.log(helloEl instanceof HTMLElement); // 输出: true

// 可以直接插入页面正常使用
document.body.append(helloEl);

补充说明 #

• 未通过customElements.define注册的标签，或是不符合短横线命名规则的标签，创建后都会被浏览器识别为HTMLUnknownElement实例，这就是你最开始测试document.createElement("hello")得到未知元素构造函数的原因
• 如果需要扩展原生内置元素（比如自定义样式和行为的按钮、输入框），可以继承对应原生元素类（例如HTMLButtonElement），注册时添加extends配置，创建元素时需要传入is参数指定自定义元素名
• 除了基础的类定义，Custom Elements还支持属性变化监听、Shadow DOM样式隔离、元素移除/属性变化等生命周期回调能力，可以根据业务需求按需实现

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