Web Components：原生组件化开发新趋势

张桂英

2025-06-18 01:12

阅读 766

开篇：Web Components 是什么？

你有没有想过，网页就像搭积木一样，用一个个“模块”拼起来？这些模块可以重复使用、独立维护，还能在不同的项目里通用。这就是组件化开发。

而 Web Components 就是浏览器原生支持的组件化技术，它让你可以直接用 HTML、CSS 和 JavaScript 来创建自己的“网页积木”，不依赖任何框架（比如 Vue 或 React），而且这些组件可以在任何现代浏览器中使用。

换句话说，Web Components = 原生 + 组件 + 可复用 + 跨平台。

它的主要优势包括：

不依赖框架，减少学习成本
真正跨平台兼容主流浏览器
提高代码复用性与可维护性
适合构建 UI 库或设计系统

现在我们就一起来从零开始学习，一步一步地写出第一个 Web Component！

环境准备：打造你的开发环境

我们只需要一个基础的开发环境即可开始写 Web Components，无需安装复杂的工具链。

所需工具清单：

工具	功能说明
文本编辑器	推荐 VS Code（免费）
浏览器	推荐 Chrome / Edge / Safari
文件结构	简单的 HTML + JS + CSS 即可

步骤：搭建一个本地开发环境

下载并安装 VS Code
安装后打开，安装一些常用插件（比如 "Live Server" 可以快速预览页面）。
新建项目文件夹
- 创建一个新文件夹，例如：my-web-components
- 在该文件夹下创建以下文件：
```
my-web-components/
  ├── index.html
  └── main.js
```
启动本地服务器
- 如果你安装了 Live Server 插件，在 index.html 中右键 → Open with Live Server
- 页面将在浏览器中自动打开，地址通常是：http://localhost:5500

这样我们的开发环境就准备好了！简单又高效 ✅

核心概念：Web Components 三大支柱

Web Components 的核心是三大 API，分别是：

1. `<template>` 和 `<shadow DOM>` —— 隐藏实现细节

HTML <template> 元素允许你定义 HTML 片段，但不会立即显示出来，只会在需要时插入到 DOM 中。Shadow DOM 更强大，它允许你为某个元素创建一个“影子根节点”，这个区域内的 HTML 和 CSS 是完全隔离的，外部样式不会影响到它。

✅ 这意味着你可以封装一套独立的样式和结构，就像一个黑盒子！

示例：

<template id="hello-template">
  <style>
    h1 {
      color: purple;
      font-family: sans-serif;
    }
  </style>
  <h1>Hello, Web Component!</h1>
</template>

2. 自定义元素（Custom Elements）——创造属于你的 HTML 标签

通过 customElements.define() 方法，我们可以创建一个新的 HTML 标签，比如 <my-hello>，然后像普通标签一样使用它。

示例：

class MyHello extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('hello-template');
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-hello', MyHello);

CSS动画效果展示-2

3. 使用方式：

<!-- index.html -->
<body>
  <my-hello></my-hello>
</body>

现在刷新页面，你会看到紫色标题“Hello, Web Component!”出现了 ✅

实战项目：做一个带按钮的计数器组件

响应式布局概念图-1

接下来，我们将一步步创建一个计数器组件，功能如下：

显示当前数字
包含两个按钮：+1 和 -1
拥有独立样式，不受外界影响

第一步：编写模板

<!-- index.html -->
<template id="counter-template">
  <style>
    .counter {
      padding: 20px;
      border: 1px solid #ccc;
      text-align: center;
      font-family: sans-serif;
    }
    button {
      margin: 0 10px;
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
  <div class="counter">
    <p>当前值：<span id="count">0</span></p>
    <button id="inc-btn">+1</button>
    <button id="dec-btn">-1</button>
  </div>
</template>

第二步：定义自定义元素类

// main.js
class CounterComponent extends HTMLElement {
  constructor() {
    super();
    // 创建 Shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });

    // 获取模板内容并克隆
    const template = document.getElementById('counter-template');
    const instance = template.content.cloneNode(true);

    // 添加到 Shadow DOM
    shadow.appendChild(instance);

    // 初始化数据与事件绑定
    this.count = 0;

    const countEl = shadow.getElementById('count');
    const incBtn = shadow.getElementById('inc-btn');
    const decBtn = shadow.getElementById('dec-btn');

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

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

// 注册组件
customElements.define('my-counter', CounterComponent);

第三步：使用组件

<!-- index.html -->
<body>
  <h1>我的第一个 Web Components</h1>
  <my-counter></my-counter>
</body>

✅ 刷新页面，你会看到一个可交互的计数器组件，并且它的样式不会被外部 CSS 影响！

常见问题解答（FAQ）

下面是一些初学者最常遇到的问题👇

❓Q1：为什么我的组件没有显示出来？

可能原因：
- 忘记注册组件（未调用 customElements.define(...)）
- 组件名称不是 kebab-case（如用了驼峰命名法 MyCounter，应为 my-counter）
- 浏览器控制台报错，请检查是否语法错误或路径错误

❓Q2：Shadow DOM 和 Light DOM 有什么区别？

Shadow DOM：是一个隔离的 DOM 子树，样式和结构都独立于主文档。
Light DOM：就是普通的 HTML 结构，受全局样式影响。

👉 举个例子：你在网站上写了一个红色按钮样式，如果你把一个用 Shadow DOM 封装的按钮放进去，它的颜色就不会变成红色。

❓Q3：Web Components 支持老版浏览器吗？

主流现代浏览器（Chrome、Firefox、Edge、Safari）均支持 Web Components 技术。
如果你需要兼容 IE11，建议使用官方提供的 Polyfill（webcomponentsjs）

学习建议：下一步怎么学得更深？

恭喜你完成了第一个 Web Components 项目！

接下来你可以尝试进阶方向如下：

✅ 1. 尝试更复杂组件（推荐）

表单验证组件
Tab 切换面板
卡片列表组件

✅ 2. 引入属性和方法通信

使用 attributeChangedCallback() 实现组件传参
使用方法实现对外暴露接口

示例：传递初始值

<my-counter initial-count="10"></my-counter>

class MyCounter extends HTMLElement {
  static get observedAttributes() {
    return ['initial-count'];
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (name === 'initial-count') {
      this.count = parseInt(newVal);
    }
  }
}

✅ 3. 学习 ES Modules 加载方式

使用 <script type="module"> 导出多个组件
构建小型组件库

✅ 4. 使用 npm + 工具链打包组件（选学）

了解 rollup.js / webpack 如何打包 web components
发布自己的组件包

结语：掌握 Web Components，开启新的前端旅程

Web Components 是一项真正意义上的“原生组件化”技术，它让我们可以用最标准的方式写出可重用、可维护、跨平台的 UI 组件。

对于刚入门的小白来说，掌握这项技能不仅可以加深对 HTML/CSS/JS 的理解，也能为你后续学习其他前端框架打下坚实基础。

只要你多动手、多实践，相信很快你就能写出自己的组件库啦 🚀

🎉 持续练习、持续分享，下一个优秀的开发者就是你！

📌 下一篇推荐文章：《如何将 Web Components 打包发布为 npm 包》
🔍 关注我，获取更多实用前端教程！

标签:PythonReact

最热最新

暂无评论

为你推荐

暂无相关推荐

Web Components：原生组件化开发新趋势

开篇：Web Components 是什么？

环境准备：打造你的开发环境

所需工具清单：

步骤：搭建一个本地开发环境

核心概念：Web Components 三大支柱

1. `<template>` 和 `<shadow DOM>` —— 隐藏实现细节

示例：

2. 自定义元素（Custom Elements）——创造属于你的 HTML 标签

示例：

3. 使用方式：

实战项目：做一个带按钮的计数器组件

第一步：编写模板

第二步：定义自定义元素类

第三步：使用组件

常见问题解答（FAQ）

❓Q1：为什么我的组件没有显示出来？

❓Q2：Shadow DOM 和 Light DOM 有什么区别？

❓Q3：Web Components 支持老版浏览器吗？

学习建议：下一步怎么学得更深？

✅ 1. 尝试更复杂组件（推荐）

✅ 2. 引入属性和方法通信

示例：传递初始值

✅ 3. 学习 ES Modules 加载方式

✅ 4. 使用 npm + 工具链打包组件（选学）

结语：掌握 Web Components，开启新的前端旅程

评论 0

为你推荐

精选内容

Web Components：原生组件化开发新趋势

开篇：Web Components 是什么？

环境准备：打造你的开发环境

所需工具清单：

步骤：搭建一个本地开发环境

核心概念：Web Components 三大支柱

1. <template> 和 <shadow DOM> —— 隐藏实现细节

示例：

2. 自定义元素（Custom Elements）——创造属于你的 HTML 标签

示例：

3. 使用方式：

实战项目：做一个带按钮的计数器组件

第一步：编写模板

第二步：定义自定义元素类

第三步：使用组件

常见问题解答（FAQ）

❓Q1：为什么我的组件没有显示出来？

❓Q2：Shadow DOM 和 Light DOM 有什么区别？

❓Q3：Web Components 支持老版浏览器吗？

学习建议：下一步怎么学得更深？

✅ 1. 尝试更复杂组件（推荐）

✅ 2. 引入属性和方法通信

示例：传递初始值

✅ 3. 学习 ES Modules 加载方式

✅ 4. 使用 npm + 工具链打包组件（选学）

结语：掌握 Web Components，开启新的前端旅程

评论 0

为你推荐

相关推荐

精选内容

1. `<template>` 和 `<shadow DOM>` —— 隐藏实现细节