html Web Components组件

2026-04-24 04:00:18 436阅读 0评论

用 HTML Web Components 构建可复用的网页模块：思路、步骤与落地

Web Components 是一组浏览器原生支持的 API，能让你用普通的 HTML、CSS 与 JavaScript 封装可复用的网页模块。它不像React或Vue那样依赖庞大的运行时，也不需要额外的构建流程，直接在页面里“搭模块”，既轻量又灵活，特别适合小而独立的UI部件或业务片段。

为什么选择它

想象你在维护一个中型电商页面，商品卡片、筛选面板、登录弹窗这些小模块需要在多个页面复用。用传统方式，你会把样式和逻辑拷贝到每个页面，维护成本高且容易出错。Web Components 让你把每个模块打包成独立的组件，像搭积木一样组合，既统一风格，也便于迭代与升级。

核心概念与要点

影子 DOM：用 shadowRoot 为组件创建独立的DOM树，组件样式与宿主页面解耦，避免CSS污染。
自定义元素：通过define注册新元素，使用class声明或customElements.define注册，组件一创建即进入浏览器的命名空间。
HTML模板：用<template>与<slot>定义组件的结构和内容注入点，便于构建可复用的UI骨架。
生命周期：attachedCallback（或connectedCallback）、detachedCallback（或disconnectedCallback）等，关注连接与断开时的初始化与清理逻辑。

实战：从零搭建一个可复用的计数器组件

准备阶段

在项目目录新建一个Counter文件夹，放三个基础文件：counter.html、counter.css、counter.js，并准备一个宿主页面index.html。

构建组件

在counter.html中，用<template>定义UI结构，并把需要在组件外访问的元素放入<slot>：

<template id="counter-template">
  <style>
    .counter {
      padding: 10px 20px;
      background: #f0f0f0;
      border-radius: 4px;
    }
  </style>
  <div class="counter">
    <slot></slot>
    <div>
      <button id="decrement">−</button>
      <span id="count">0</span>
      <button id="increment">+</button>
    </div>
  </div>
</template>

<template id="counter-header">
  <style>
    .header {
      padding: 8px 16px;
      background: #ddd;
      border-radius: 4px;
    }
  </style>
  <div class="header">
    <slot></slot>
  </div>
</template>

在counter.css中补充组件样式，保持独立与可复用。

在counter.js中注册组件并暴露接口：

const html = document.createElement('template');
html.id = 'counter-template';
html.innerHTML = document.getElementById('counter-template').innerHTML;
document.body.appendChild(html);

class Counter extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(html.content.cloneNode(true));

    this.count = 0;
    this.incrementBtn = this.shadowRoot.getElementById('increment');
    this.decrementBtn = this.shadowRoot.getElementById('decrement');
    this.countEl = this.shadowRoot.getElementById('count');

    this.incrementBtn.addEventListener('click', () => {
      this.count++;
      this.countEl.textContent = this.count;
    });

    this.decrementBtn.addEventListener('click', () => {
      this.count--;
      this.countEl.textContent = this.count;
    });
  }
}

customElements.define('counter', Counter);

使用与组合

在index.html中，你可以这样组合使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Components 示例</title>
  <link rel="stylesheet" href="counter.css">
</head>
<body>
  <counter>
    <span>我的计数器：</span>
  </counter>

  <counter-header>
    <span>计数器标题：</span>
  </counter-header>

  <script src="counter.js"></script>
</body>
</html>