用 HTML Custom Elements 自建可复用组件：思路、步骤与落地

在网页开发中，把一组可复用的 UI 或逻辑抽象成模块，能显著提升开发效率和代码可维护性。HTML Custom Elements 就是让 HTML 本身具备“自定义能力”的原生方案，不需要引入额外库也能构建出可复用的组件。

为什么要用 Custom Elements

想象你在做一个电商页面，需要在多个地方展示“商品卡片”，样式和交互都一致。用 div 搭建并手动复制粘贴固然能实现，但维护成本高、改版时到处找样式容易出错。用 Custom Elements 把这个卡片做成一个组件，一处修改、全处生效，结构也更清晰。

核心概念与关键步骤

1. 定义组件：class 与 extend

从最基础的 HTML 元素开始，通过 class 或自定义元素名来标识，再用 class extends 指向一个预定义的类，构建一个继承关系。本质是用原生的 class 扩展 HTMLElement。

<!-- 定义组件的 HTML 模板 -->
<template id="my-card-template">
  <style>
    .card { width: 200px; padding: 10px; border: 1px solid #ccc; }
  </style>
  <div class="card">
    <slot></slot>
  </div>
</template>

<!-- 注册组件 -->
<script>
  class MyCard extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-card-template').content;
      const clone = document.importNode(template, true);
      this.appendChild(clone);
    }
  }
  customElements.define('my-card', MyCard);
</script>

这段代码里，