Web Components：原生组件化开发新趋势（面向零基础初学者的教程）

Web技术

2025-06-16 15:49

阅读 328

开篇：什么是 Web Components？它有什么用？

你有没有想过，在写网页的时候，能不能像搭积木一样，把一些常用的部分提前准备好，直接“插”到不同的页面里使用呢？比如一个按钮、一个导航栏、一个用户评论框等等。

Web Components 就是这样一套浏览器原生支持的技术，它可以让你创建“自定义”的 HTML 标签，并把这些标签封装起来，复用在任何网站上。
最重要的是，它不需要依赖 React、Vue 这类框架，只需要用纯 HTML、CSS 和 JS 就能实现！

简单理解一下：

HTML 标准标签：比如 <div>、<button> 是浏览器自带的标签。
Web Components 允许你创建自己的标签：比如 <my-button>、<user-card>。
这些自定义标签可以在多个项目中重复使用，就像积木一样。

所以如果你是个想学前端的新人，学习 Web Components 就像是学会自己制作“可重用模块”，这是成为专业开发者的重要一步！

环境准备：搭建一个适合开发的小环境

要开始学习 Web Components，我们先来配置一个简单的开发环境。这里会从零开始一步步带你完成。

步骤 1：安装一个代码编辑器

推荐使用 VS Code（Visual Studio Code），它是免费的、跨平台的，非常适合前端开发。

前往官网下载安装包并安装：https://code.visualstudio.com/
安装好后打开即可编写代码

步骤 2：创建一个项目文件夹

打开你的电脑（Windows 或 Mac），创建一个文件夹，比如叫 web-components-project。

在这个文件夹里，再创建两个文件：

index.html
main.js

结构如下：

web-components-project/
├── index.html
└── main.js

步骤 3：启动本地服务器

虽然你可以直接双击 index.html 打开页面，但为了安全起见和避免加载问题，建议使用一个小型本地服务器来运行你的代码。

方式一（推荐）：使用 VS Code 的 Live Server 插件

在 VS Code 中点击左侧扩展图标（或者按 Ctrl + Shift + X）
搜索 "Live Server"，找到由 Ritwick Dey 开发的那个插件
点击安装
右键点击 index.html 文件 → Open with Live Server

现在你的网页就在本地服务器上运行了，访问地址一般是：http://localhost:5500

✔ 小贴士：Live Server 能自动刷新浏览器，方便我们实时查看修改效果。

核心概念：认识 Web Components 的三大支柱

Web Components 技术其实是由三个关键技术组成的，它们各自有不同的作用：

名称	作用简述
Custom Elements（自定义元素）	创建属于自己的 HTML 标签
Shadow DOM	给组件加一个“独立的样式空间”
HTML Templates	写好的模板内容可以直接复用

下面我们逐一来介绍这些技术，每个部分都配有简单易懂的示例代码。

1️⃣ Custom Elements：创建属于自己的 HTML 标签

Custom Elements 是 Web Components 的核心，它允许你创建新的 HTML 标签。

举个例子：我们可以创建一个 <hello-world> 标签，当页面使用它时就显示一句话。

示例代码

// main.js

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = "<h1>Hello, 世界！</h1>";
  }
}

customElements.define("hello-world", HelloWorld);

接着在 index.html 文件中加入：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Hello Web Components</title>
</head>
<body>
  <hello-world></hello-world>

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

运行结果：页面中会出现一个 <hello-world> 标签，并显示 “Hello, 世界！”。

🔍 小知识：

extends HTMLElement 表示这是一个继承标准 HTML 元素的新元素
customElements.define() 是注册这个自定义元素的方法

2️⃣ Shadow DOM：给组件“戴上头盔”，保护里面的样式不被干扰

默认情况下，网页上的 CSS 样式会影响整个页面，包括所有标签。但如果你希望某个组件内部的样式只作用于它自己，就可以使用 Shadow DOM。

示例代码

class MyCard extends HTMLElement {
  constructor() {
    super();

    // 创建 Shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });

    // 创建内容
    const div = document.createElement('div');
    div.textContent = "这是一张卡片的内容";
    div.style.background = "#f0f0f0";
    div.style.padding = "20px";

    // 把内容添加到 Shadow DOM 里面
    shadow.appendChild(div);
  }
}

customElements.define("my-card", MyCard);

然后在 index.html 添加：

<my-card></my-card>

此时你会发现，这段内容有背景色，但不会影响外面其他元素的样式。

🧠 总结：

Shadow DOM 类似于一个“隔离区”，让组件样式更稳定、不容易出错
对新手来说，可以理解为：“这个盒子里的样式不会乱跑出去”

3️⃣ HTML Templates：预定义结构，随时调用

有时你可能需要写一段复杂的 HTML 结构，不想每次手动拼字符串，这时候可以用 <template> 标签。

它不会立即渲染到页面上，而是作为一个“模具”存在，等待你在 JS 中调用。

示例代码

<!-- index.html -->
<template id="card-template">
  <style>
    .card {
      background-color: #e6e6e6;
      padding: 15px;
      border-radius: 8px;
    }
  </style>
  <div class="card">
    <h2>我是模板中的标题</h2>
    <p>这是模板内的段落</p>
  </div>
</template>

JS 部分：

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

customElements.define("reusable-card", ReusableCard);

CSS动画效果展示-2

在 HTML 使用：

<reusable-card></reusable-card>

✔ 效果：你会看到一个带样式的卡片内容。

📝 总结：

<template> 是一种“隐藏的 HTML 片段”，用于存储结构
使用 cloneNode(true) 可以克隆模板里的内容并插入到页面中

实战项目：做一个用户信息展示组件

现在我们来动手做一个完整的实战项目。我们将创建一个组件 <user-card>，用来展示用户名、邮箱等信息。

✅ 功能目标：

显示用户昵称和邮箱
支持传入数据
内部样式不受外部影响

🧩 步骤 1：定义组件结构和样式

在 index.html 加一个 <template>：

<template id="user-card-template">
  <style>
    .container {
      background: #fff;
      border: 1px solid #ccc;
      padding: 15px;
      max-width: 300px;
      margin: 10px auto;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      border-radius: 6px;
    }
    h3 { color: #333; }
    p { font-size: 0.9em; }
  </style>
  <div class="container">
    <h3>用户名称：Jane Doe</h3>
    <p>邮箱：jane@example.com</p>
  </div>
</template>

🧩 步骤 2：创建组件 JS 文件

class UserCard extends HTMLElement {
  constructor() {
    super();
    
    const template = document.getElementById('user-card-template').content;
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.cloneNode(true));

    this._name = "Jane Doe";
    this._email = "jane@example.com";
  }

  static get observedAttributes() {
    return ['name', 'email'];
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === 'name') {
      this._name = newValue;
      this.updateContent();
    }

    if (attrName === 'email') {
      this._email = newValue;
      this.updateContent();
    }
  }

  updateContent() {
    const container = this.shadowRoot.querySelector('.container');
    if (container) {
      container.innerHTML = `
        <h3>用户名称：${this._name}</h3>
        <p>邮箱：${this._email}</p>
      `;
    }
  }
}

customElements.define("user-card", UserCard);

🧩 步骤 3：在 HTML 页面中使用组件

<user-card name="Tom" email="tom@test.com"></user-card>
<user-card name="Lily" email="lily@demo.org"></user-card>

🎉 最终效果：

你现在能看到两个卡片，分别展示了不同的用户信息，而且它们的样式彼此独立，互不影响！

💡 新手常问：

Q：为什么组件内容不能直接修改 HTML？ A：因为在 Shadow DOM 里，常规方法无法访问内部节点。所以我们一般通过属性控制内容，或者暴露公共方法来操作组件。

常见问题解答（FAQ）

用户交互流程图-1

以下是一些新手在学习 Web Components 时经常遇到的问题和解决办法：

❓Q1：为什么组件内容没有显示？

✅ 答：检查是否忘记在 HTML 中引入 JS 文件；或者组件名拼写有误。另外，确保在 customElements.define() 中使用的标签名是小写+连字符的形式（例如：my-component）。

❓Q2：组件样式被全局样式污染了怎么办？

✅ 答：说明没有正确使用 Shadow DOM。请确保在组件构造函数中使用 attachShadow() 方法，并将样式放在 Shadow 区域内。

❓Q3：我不能在组件内部选择元素怎么办？

✅ 答：这是因为你用了 Shadow DOM。需要使用 shadowRoot 属性来访问节点。例如：this.shadowRoot.querySelector('xxx')

❓Q4：如何把组件发布成 npm 包？

✅ 答：你可以用打包工具如 Vite 或 Rollup 打包组件成 JS 模块。然后通过 npm 发布。这部分超出本教程范围，可以后面专门学习模块打包和 NPM 发布流程。

❓Q5：Web Components 和 Vue / React 有什么区别？

✅ 答：React 和 Vue 是基于 JavaScript 的框架，而 Web Components 是浏览器原生支持的功能。它们都能创建组件，但 Web Components 不需要依赖第三方库，更加轻量。

学习建议：下一步可以学什么？

如果你已经完成了上面的实战项目，恭喜你！你已经掌握了 Web Components 的基本使用方法。接下来你可以沿着下面这些方向继续学习：

✅ 拓展知识点

如何通过 slots 插入任意内容到组件中
学习更多 Shadow DOM 的高级用法（比如样式穿透）
探索 attributeChangedCallback 和生命周期方法
尝试结合模块化系统（如 ES Modules）
使用构建工具（如 Vite、Rollup）优化组件打包

🔍 推荐资源

MDN Web Docs - Web Components 指南：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
Web Components 博客集合：https://www.webcomponents.org/
YouTube 视频搜索关键词：“Web Components Tutorial”

结语：掌握 Web Components，开启组件化开发新篇章

Web Components 是现代前端开发中一项非常重要的技术，它的优势在于：

原生支持，无需依赖大型框架
组件可重用性高
更加接近标准化的开发模式

作为刚入门的新手，掌握 Web Components 能帮你打好组件化思维的基础，也能为将来深入学习 React、Vue 提供良好的铺垫。

只要你勤加练习，多思考代码背后的意义，相信你很快就能成为一名合格的前端开发者！

加油！🚀

标签:面试题书籍教程前端

最热最新

暂无评论

为你推荐

暂无相关推荐

Web Components：原生组件化开发新趋势（面向零基础初学者的教程）

开篇：什么是 Web Components？它有什么用？

环境准备：搭建一个适合开发的小环境

步骤 1：安装一个代码编辑器

步骤 2：创建一个项目文件夹

步骤 3：启动本地服务器

方式一（推荐）：使用 VS Code 的 Live Server 插件

核心概念：认识 Web Components 的三大支柱

1️⃣ Custom Elements：创建属于自己的 HTML 标签

示例代码

2️⃣ Shadow DOM：给组件“戴上头盔”，保护里面的样式不被干扰

示例代码

3️⃣ HTML Templates：预定义结构，随时调用

示例代码

实战项目：做一个用户信息展示组件

✅ 功能目标：

🧩 步骤 1：定义组件结构和样式

🧩 步骤 2：创建组件 JS 文件

🧩 步骤 3：在 HTML 页面中使用组件

常见问题解答（FAQ）

❓Q1：为什么组件内容没有显示？

❓Q2：组件样式被全局样式污染了怎么办？

❓Q3：我不能在组件内部选择元素怎么办？

❓Q4：如何把组件发布成 npm 包？

❓Q5：Web Components 和 Vue / React 有什么区别？

学习建议：下一步可以学什么？

✅ 拓展知识点

🔍 推荐资源

结语：掌握 Web Components，开启组件化开发新篇章

评论 0

为你推荐

精选内容