Web Components：原生组件化开发新趋势（面向零基础初学者）
开篇：Web Components 是什么？有什么用？
你可能听说过一些前端框架，比如 React、Vue、Angular 等等。它们都能帮你快速构建页面，但都需要额外引入一大堆工具和库。
那有没有一种方式，可以让你不依赖这些框架，也能像搭积木一样搭建网页呢？当然有！它就是 Web Components。
Web Components 是浏览器原生支持的一种创建可复用 HTML 组件的技术。简单来说，你可以把一个按钮、一个下拉菜单、一段动画效果等，封装成一个独立的组件，然后在任何网页中像使用普通 HTML 标签一样来使用它。
例如，你可以创建自己的 <my-button> 标签，然后这样使用：
<my-button>点我试试</my-button>
是不是很酷？而且这个组件不需要任何框架，只要浏览器支持标准 HTML，就能运行！
环境准备：手把手教你搭建开发环境
✅ 准备工作
开始前，你需要准备以下工具：
- 一台电脑（Windows / Mac / Linux 都行）
- 浏览器（推荐 Chrome 或 Edge）
- 代码编辑器（推荐 VS Code）
- 无需安装额外插件或依赖库！
🛠️ 步骤一：新建项目文件夹
打开你的电脑，新建一个文件夹，比如叫 web-components-demo。
📄 步骤二：创建基础文件结构
在这个文件夹里创建三个文件：
index.html—— 页面主文件style.css—— 页面样式文件main.js—— JavaScript 主文件
结构如下：
web-components-demo/
├── index.html
├── style.css
└── main.js
🚀 步骤三：写一点测试代码看看是否正常运行
打开 index.html 文件，输入以下内容：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>我的第一个 Web Components 项目</title>
<script type="module" src="main.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
打开浏览器，在地址栏输入文件路径（如：file:///C:/path/to/web-components-demo/index.html），看到 “Hello World” 就说明环境没问题了！
核心概念：什么是 Web Components 的三大支柱？
Web Components 由三项核心技术组成，这三项技术是它的“三大支柱”，也是我们理解它原理的关键。
🔹 1. 自定义元素（Custom Elements）
这是 Web Components 最核心的部分。允许你自定义新的 HTML 元素标签。
举个例子：你想做一个带图标的按钮 <icon-button>，就可以通过 Custom Elements 创建它。
示例代码：定义一个最简单的自定义元素
在 main.js 中添加如下代码：
class MyButton extends HTMLElement {
constructor() {
super();
// 创建一个 button 元素
const button = document.createElement('button');
button.textContent = '我是按钮';
// 插入到自定义元素内部
this.appendChild(button);
}
}
// 注册组件，名字必须包含短横线
customElements.define('my-button', MyButton);
然后在 index.html 中使用：
<my-button></my-button>
刷新页面，你会看到一个自定义按钮出现啦！
📌 小贴士：自定义元素的名字必须包含短横线 -，比如 my-button，不能只用 button。
🔹 2. Shadow DOM（影子 DOM）
Shadow DOM 可以将组件的内容与外界隔离开来，保证样式互不影响，就像一个小黑盒。
比如，你在组件中写了红色字体样式，外面不会受到干扰。
示例代码：为组件添加 Shadow DOM
修改 main.js：
class MyButton extends HTMLElement {
constructor() {
super();
// 创建 Shadow Root
const shadow = this.attachShadow({ mode: 'open' });
// 创建 button 和样式
const button = document.createElement('button');
button.textContent = '我是 Shadow 按钮';
const style = document.createElement('style');
style.textContent = `
button {
background-color: lightblue;
color: darkred;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
`;
shadow.appendChild(style);
shadow.appendChild(button);
}
}
customElements.define('my-button', MyButton);
刷新页面，现在按钮变成了蓝色背景+红色文字，并且不受外部 CSS 影响。
🔹 3. HTML 模板（Template & Slot）
如果你想给组件传递内容，比如按钮里的文字，可以用 <slot>。HTML Template 则让你提前写好组件结构并延后渲染。
示例代码：使用 template + slot
更新 main.js：
// 创建模板
const template = document.createElement('template');
template.innerHTML = `
<style>
button {
background-color: lightgreen;
color: black;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
<button>
<slot name="text">默认按钮</slot>
</button>
`;
class MyFancyButton extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(template.content.cloneNode(true));
}
}
customElements.define('my-fancy-button', MyFancyButton);
在 index.html 中使用：
<my-fancy-button><span slot="text">点击这里</span></my-fancy-button>
效果是：一个绿色按钮，里面显示“点击这里”。
实战项目：做一个“点赞按钮”组件
让我们动手做一个实用的小组件吧！目标是做一个带有计数的点赞按钮，每次点击数字加一。
🧩 第一步：写基本结构
继续用之前的文件结构，在 main.js 中写组件逻辑：
const likeTemplate = document.createElement('template');
likeTemplate.innerHTML = `
<style>
.like-btn {
background-color: #ff4081;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
<button class="like-btn">👍 点赞 (<span id="count">0</span>)</button>
`;
class LikeButton extends HTMLElement {
#count = 0;
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(likeTemplate.content.cloneNode(true));
this.button = shadow.querySelector('.like-btn');
this.countSpan = shadow.querySelector('#count');
this.button.addEventListener('click', () => {
this.#count++;
this.countSpan.textContent = this.#count;
});
}
}
customElements.define('like-button', LikeButton);
在 index.html 中调用组件：
<like-button></like-button>
刷新浏览器，点击按钮，数字会不断加一！
🎉 成功实现了一个可复用的点赞按钮！
常见问题：新手容易遇到的问题及解决方法
❓ 为什么我的自定义组件不显示？
✅ 确保：
- 组件名称含有短横线（如 my-component）
- 用了
customElements.define()注册 - 使用了正确的 HTML 标签闭合（如
<my-button></my-button>）
❓ 组件的样式被全局样式影响了怎么办？
✅ 加上 Shadow DOM，让组件内的样式与外界隔离。
❓ 怎么调试 Shadow DOM 里的内容？
✅ 在浏览器开发者工具中找到组件，展开 #shadow-root 即可查看结构。
学习建议：下一步学习路线
恭喜你完成本次入门教程！接下来你可以沿着以下几个方向继续学习：
📌 1. 深入理解 Shadow DOM
- 探索更多关于样式隔离和 DOM 结构的知识
- 尝试使用多个
<slot>实现更复杂的布局
📌 2. 使用 Web Components 构建完整网站组件库
- 像 Element Plus / Ant Design 一样制作一套 UI 库
- 使用 Web Components + JavaScript 实现交互效果
📌 3. 结合现代前端架构使用 Web Components
- Web Components 可以和 React、Vue 一起使用
- 用于跨项目复用组件，提升团队协作效率
📌 4. 进阶学习资源推荐
- MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
- 《深入浅出 Web Components》电子书
- YouTube 上搜索 "Web Components tutorial" 观看视频教程
结语：拥抱原生的力量，开启组件化新旅程！
Web Components 不需要复杂的构建工具、不用安装框架，只要你了解基本的 HTML/CSS/JS，就可以立刻开始构建属于自己的组件世界。
无论你是刚入门的新手，还是希望摆脱框架依赖的开发者，Web Components 都是一个值得投入学习的新方向！
💡 动手去写一个属于你自己的组件吧，越早实践，收获越大！
🔚 本教程完 | 字数约 2479 字
评论 0