Web Components：原生组件化开发新趋势
🧩 适合谁读：本教程专为前端初学者编写，不需要你有 HTML、CSS 或 JavaScript 基础知识。我们会从最简单的例子出发，用通俗易懂的语言带你走进“Web Components”的世界。
开篇：什么是 Web Components？
还记得你在乐高积木里一块块拼搭房子的经历吗？Web Components 就是网页开发中的“乐高积木”。它是一种浏览器原生支持的组件化技术，让我们可以把一些常用的功能或样式封装成一个个可复用的小模块，然后像搭积木一样组合到一起，快速构建网页。
✨ 一句话总结：
Web Components 是一种可以让你自定义 HTML 标签的技术。
比如你可以创建一个这样的标签：
<my-button type="primary">点击我</my-button>
而它的背后是你自己写的代码，它在任何网页中都可以被使用，就像 <button> 一样简单又强大！
环境准备：搭建你的第一个开发环境
开始写代码之前，我们先准备好工具。别担心，只需要几个简单的步骤就可以完成环境搭建。
步骤一：安装代码编辑器
推荐使用 Visual Studio Code（简称 VS Code），它是目前最流行的免费代码编辑器。
✅ 安装方法：
- 打开网址 https://code.visualstudio.com
- 下载对应操作系统版本并安装
步骤二：创建一个项目文件夹
打开电脑的任意位置，新建一个文件夹，例如叫做 web-components-tutorial。
然后在这个文件夹中，创建一个文件叫 index.html。
内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的第一个 Web Component</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
步骤三：使用本地服务器运行代码
如果你直接双击打开 index.html 文件，可能无法加载 Web Components，因为现代浏览器出于安全考虑限制了本地访问资源。
所以我们需要一个轻量级的本地服务器来运行这个页面。
使用 VS Code 的 “Live Server” 插件：
- 打开 VS Code
- 进入插件市场（点击左侧图标栏最后一个按钮）
- 搜索 “Live Server”
- 安装并重启后，右键
index.html，选择 “Open with Live Server”
你会看到网页在浏览器中打开，地址是类似 http://localhost:5500/index.html。
✅ 到这里，我们的开发环境就准备好啦！
核心概念：揭开 Web Components 的神秘面纱
Web Components 并不是一个新技术，而是多个浏览器标准的统称，主要包括三个核心部分：
- Custom Elements（自定义元素）
- Shadow DOM（影子 DOM）
- HTML Templates（HTML 模板）
下面我们逐一讲解它们是什么，以及它们的作用。
1. 自定义元素（Custom Elements）
你可以理解为：给 HTML 添加你自己的标签。
比如我们想创建一个 <hello-world> 标签，显示一句问候语。
示例代码：
在 index.html 中添加一个 <script> 标签：
<script>
class HelloWorld extends HTMLElement {
constructor() {
super();
this.innerHTML = "Hello, 我是一个自定义组件！";
}
}
// 注册组件
customElements.define("hello-world", HelloWorld);
</script>
然后在页面上写：
<hello-world></hello-world>
保存后刷新页面，你会看到这句文字出现在页面上！
✅ 提示：所有的自定义标签名必须包含短横线
-，否则会报错。例如<my-card>是合法的，而<card>不合法。
2. Shadow DOM（影子 DOM）
Shadow DOM 的作用，是把组件的样式和外部隔离开。这样就不会造成样式混乱。
比如你在组件里写了红色背景：
<style>
div {
background-color: red;
}
</style>
如果不使用 Shadow DOM，那这个样式会影响整个页面。有了它，就只影响组件本身。
示例代码：
修改之前的组件代码：
<script>
class MyCard extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
const shadow = this.attachShadow({ mode: "open" });
// 创建一个 div，并加上样式
const div = document.createElement("div");
div.textContent = "这是我的卡片组件";
const style = document.createElement("style");
style.textContent = `
div {
padding: 20px;
background-color: lightblue;
border-radius: 8px;
}
`;
// 把元素加进 Shadow DOM
shadow.appendChild(style);
shadow.appendChild(div);
}
}
customElements.define("my-card", MyCard);
</script>
然后在 body 中添加：
<my-card></my-card>
刷新页面，就能看到带样式的蓝色卡片了！而且这个样式不会影响其他地方。
3. HTML Templates（模板）
当组件结构比较复杂时，每次都手动创建 DOM 节点就会很麻烦。这个时候我们可以用 <template> 来提前写好结构，然后在组件中调用。
示例代码：
在 <body> 上方添加模板：
<template id="greeting-template">
<style>
p {
color: green;
font-size: 1.2em;
}
</style>
<p>你好呀~我是模板里的内容！</p>
</template>
然后在 <script> 中使用这个模板：
<script>
class Greeting extends HTMLElement {
constructor() {
super();
const template = document.getElementById("greeting-template").content;
const shadow = this.attachShadow({ mode: "open" });
shadow.appendChild(template.cloneNode(true));
}
}
customElements.define("hello-greeting", Greeting);
</script>
接着，在页面中插入：
<hello-greeting></hello-greeting>
刷新页面就能看到绿色的文字了！
实战项目：做一个“计数器组件”
现在我们来做一个实用的小项目：一个可以点击增加数字的计数器组件。
我们将综合运用上面学到的知识：自定义标签、Shadow DOM 和 Template。
第一步：写模板
<template id="counter-template">
<style>
button {
padding: 10px 20px;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
}
span {
font-size: 20px;
margin-right: 10px;
}
</style>
<span>当前值：</span><span id="count">0</span>
<br />
<button id="btn">点击+1</button>
</template>
第二步：写组件逻辑
<script>
class CounterComponent extends HTMLElement {
constructor() {
super();
const template = document.getElementById("counter-template").content;
const shadow = this.attachShadow({ mode: "open" });
shadow.appendChild(template.cloneNode(true));
const countSpan = shadow.querySelector("#count");
const button = shadow.querySelector("#btn");
let count = 0;
button.addEventListener("click", () => {
count++;
countSpan.textContent = count;
});
}
}
customElements.define("my-counter", CounterComponent);
</script>
第三步：在页面中使用组件
<my-counter></my-counter>
保存后刷新页面，你就能看到一个可以点击的计数器啦！
常见问题解答
❓ Q1：为什么我的自定义组件没有生效？
🔧 解决方法：
- 检查标签是否含有短横线，如
<my-component> - 查看是否已经调用
customElements.define()注册组件 - 确保脚本是在 DOM 加载之后执行的，建议把
<script>放在<body>结尾处
❓ Q2：Shadow DOM 外部还能修改样式吗？
🔧 答案：
- 不能直接通过全局 CSS 修改 Shadow DOM 内容。
- 可以使用 CSS 变量传样式，也可以使用
::part或::slotted来定制部分内容（进阶技巧）
❓ Q3：Web Components 和 React/Vue 有什么区别？
🔧 区别在于：
- React/Vue 是框架，功能丰富但需要额外引入库
- Web Components 是浏览器原生支持的，不需要额外依赖，更轻量
- Web Components 更容易与其他技术混用（比如 React + Web Component）
学习建议：下一步怎么学？
恭喜你完成了第一个 Web Component 的学习旅程！接下来你可以往这些方向继续探索：
🔍 初级进阶路径
| 阶段 | 学习目标 | 推荐资源 |
|---|---|---|
| 1️⃣ | 理解生命周期钩子（connectedCallback 等） | MDN Web Docs - Custom Elements |
| 2️⃣ | 使用属性传递数据（如 <my-card title="标题"></my-card>） |
W3C 官方文档 |
| 3️⃣ | 与外界通信（事件触发、对外暴露方法） | LitElement 教程 |
| 4️⃣ | 使用第三方库（如 Lit、Stencil）提升效率 | Lit 官网 |
📌 小建议：多动手写 demo，遇到问题不要怕搜索资料。社区资源很丰富，比如 StackOverflow 和 GitHub。
小结
本教程我们从零开始一步步实现了 Web Components 的基本使用，包括：
- 创建自定义标签
- 使用 Shadow DOM 保护样式
- 利用
<template>提前写好结构 - 完成了一个实用的计数器组件
你现在已经有能力写出属于你自己的网页“乐高模块”了！
🎉 记住一句话：
Web Components = 浏览器原生支持 + 组件化思想 + 极大的复用性和跨项目通用性
希望这篇教程能为你打开组件化开发的大门，未来走得更远！如果你想继续深入，欢迎关注我，我会持续更新更多前端知识。
评论 0