如何实现可根据标签名创建并扩展DOM元素的自定义类？

错误原因 #

你这段代码报错是因为自定义元素的构造函数必须调用无参数的super()，HTMLElement的构造函数不接受任何参数，这是Web Components规范的强制要求，所以不能在super()中传入document.createElement(tag)。

实现思路及代码示例 #

要实现“根据传入标签名创建并扩展DOM元素，同时能访问元素所有方法属性”的需求，这里提供两种可行方案：

方案1：工厂函数（推荐，简单直接）

直接根据标签名创建元素，再为元素添加自定义逻辑：

function createExtendedElement(tag: string) {
  const element = document.createElement(tag);
  // 初始化内容
  element.innerHTML = "Hello World";
  // 添加自定义方法
  element.sayHello = function() {
    console.log(`Hello from ${this.tagName.toLowerCase()} element`);
  };
  return element;
}

// 使用示例
const myDiv = createExtendedElement('div');
document.body.appendChild(myDiv);
myDiv.sayHello(); // 输出 Hello from div element
myDiv.classList.add('container'); // 直接调用元素原生方法

方案2：包装类+代理（类形式实现）

如果一定要用类的结构，通过包装元素并使用Proxy实现无缝的属性/方法访问：

class ExtendedElement {
  private element: HTMLElement;

  constructor(tag: string) {
    this.element = document.createElement(tag);
    this.element.innerHTML = "Hello World";
    
    // 返回代理对象，让类实例直接映射到内部元素的属性和方法
    return new Proxy(this, {
      get(target, prop) {
        // 优先访问类自身的属性/方法
        if (prop in target) {
          return Reflect.get(target, prop);
        }
        // 否则转发到内部元素
        return Reflect.get(target.element, prop);
      },
      set(target, prop, value) {
        if (prop in target) {
          return Reflect.set(target, prop, value);
        }
        return Reflect.set(target.element, prop, value);
      }
    });
  }

  // 自定义方法
  customLog() {
    console.log(`This is a custom method for ${this.element.tagName.toLowerCase()}`);
  }
}

// 使用示例
const myP = new ExtendedElement('p');
myP.className = 'text-muted'; // 直接设置元素原生属性
console.log(myP.innerHTML); // 输出 Hello World
myP.appendChild(document.createTextNode('!')); // 调用元素原生方法
document.body.appendChild(myP);
myP.customLog(); // 调用自定义方法

Vite的影响说明 #

Vite本身不会影响DOM元素的创建和类的逻辑，只要代码符合浏览器DOM规范和ES语法，Vite的开发服务和打包流程都能正常处理，无需额外配置。

内容的提问来源于stack exchange，提问作者Håkon Kleven