能否不使用class创建Web Components？

完全可以不用class语法创建Web Components，这并非不良实践，只是class作为构造函数的语法糖，写法更简洁直观，所以主流教程都优先用class，原型式的写法相对少见而已。

Web Components的核心API customElements.define() 要求第二个参数是构造函数，而class本质就是ES6对构造函数+原型链的语法糖，所以我们完全可以用原生的原型链方式实现自定义元素：

基础实现示例 #

// 1. 定义自定义元素的构造函数
function MyProtoElement() {
  // 必须通过Reflect.construct调用HTMLElement的构造函数，确保实例正确初始化
  return Reflect.construct(HTMLElement, [], MyProtoElement);
}

// 2. 配置原型链，让自定义元素继承HTMLElement
MyProtoElement.prototype = Object.create(HTMLElement.prototype);
// 修正constructor指向，避免原型链混乱
MyProtoElement.prototype.constructor = MyProtoElement;

// 3. 添加自定义元素的生命周期钩子或方法
MyProtoElement.prototype.connectedCallback = function() {
  this.innerHTML = `
    <div style="padding: 1rem; background: #f0f0f0;">
      <h3>原型式自定义元素</h3>
      <p>这是不用class创建的Web Component</p>
    </div>
  `;
};

// 4. 注册自定义元素
customElements.define('my-proto-element', MyProtoElement);

另一种原型链配置方式 #

也可以用Object.setPrototypeOf来更清晰地设置构造函数和原型的继承关系：

function AnotherProtoElement() {
  // 使用new.target确保子类继承时的正确性
  return Reflect.construct(HTMLElement, [], new.target);
}

// 让构造函数本身继承HTMLElement（处理静态属性/方法的继承）
Object.setPrototypeOf(AnotherProtoElement, HTMLElement);
// 让实例原型继承HTMLElement.prototype
Object.setPrototypeOf(AnotherProtoElement.prototype, HTMLElement.prototype);

AnotherProtoElement.prototype.connectedCallback = function() {
  this.textContent = '这是另一种原型式写法的自定义元素';
};

customElements.define('another-proto-element', AnotherProtoElement);

为什么这种写法少见？ #

• class语法更简洁：不需要手动处理原型链和构造函数调用，代码可读性更高，出错概率更低。
• 主流教程偏好：大部分Web Components教程都面向ES6+开发者，优先推荐class这种现代语法。
• 原型式写法易出错：手动配置原型链时容易遗漏constructor修正，或者错误调用父类构造函数，导致自定义元素无法正常工作。

但从技术角度来说，原型式写法完全符合Web Components的规范，不属于不良实践——它只是更贴近JavaScript原型继承的底层实现而已。

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