Web Components 是一套创建可重用、独立自定义 HTML 元素的技术，由 Custom Elements、Shadow DOM 和 HTML Templates 三项核心技术组成；通过它们可封装组件的结构、样式与行为，实现跨框架复用。示例中定义了 my-card 自定义元素，利用 Shadow DOM 隔离作用域，template 声明模板内容，并通过 observedAttributes 监听属性变化以实现动态更新，适用于构建高内聚、低耦合的 UI 组件库。
Web Components 是一套可以让开发者创建可重用、独立、自定义 HTML 元素的技术。它不依赖任何框架，原生支持现代浏览器，是实现组件化开发的重要方式之一。在 JavaScript 中使用 Web Components，能让你像使用 或 一样，定义自己的标签并封装样式、结构和行为。
什么是 Web Components？
Web Components 由三项核心技术组成：
- Custom Elements：允许你定义新的 HTML 标签。
- Shadow DOM：提供封装能力，让组件的样式和结构与页面其他部分隔离。
-
HTML Templates（ 和
）：用于声明组件的可复用模板内容。
这些技术共同作用，使你能够构建出真正解耦、可移植的 UI 组件。
如何创建一个自定义元素
通过 Custom Elements API，你可以注册一个新标签。下面是一个简单的例子：
立即学习“Java免费学习笔记（深入）”；
class MyCard extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM 来封装内部结构
const shadow = this.attachShadow({ mode: 'open' });
// 定义模板
const template = document.createElement('template');
template.innerHTML = `
<style>
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
font-family: sans-serif;
background: #f9f9f9;
}
h3 { color: #333; }
p { color: #555; }
</style>
<div class="card">
<h3><slot name="title">默认标题</slot></h3>
<p><slot name="content">默认内容</slot></p>
</div>
`;
// 将模板内容插入 Shadow DOM
shadow.appendChild(template.content.cloneNode(true));
}
}
// 注册自定义元素
customElements.define('my-card', MyCard);
之后就可以在 HTML 中使用：
<my-card> <span slot="title">欢迎使用 Web Components</span> <span slot="content">这是一个可复用的卡片组件。</span> </my-card>
理解 Shadow DOM 的作用
Shadow DOM 是 Web Components 的核心之一。它创建了一个独立的作用域，确保组件内的 CSS 不会污染全局样式，同时外部样式也不会意外影响组件内部。
在上面的例子中，this.attachShadow({ mode: 'open' }) 创建了一个开放的 Shadow Root。设置为 'closed' 后，外部无法访问该 Shadow DOM，适合更高封装需求。
你可以通过 shadowRoot 属性操作内部节点（仅限 mode: 'open'）：
const card = document.querySelector('my-card');
console.log(card.shadowRoot); // 可访问
组件通信与属性响应
为了让组件更灵活，通常需要支持属性传值和响应变化。可以通过 observedAttributes 和静态 getter 实现：
class MyCard extends HTMLElement {
static get observedAttributes() {
return ['title', 'color'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'title') {
// 更新 slot 内容或内部结构
const titleSlot = this.shadowRoot.querySelector('[slot="title"]');
if (titleSlot) {
titleSlot.textContent = newValue;
}
}
if (name === 'color') {
this.shadowRoot.querySelector('.card').style.borderColor = newValue;
}
}
}
然后这样使用：
<my-card title="重要通知" color="red"></my-card>
当属性变化时，attributeChangedCallback 会被触发，实现动态更新。
基本上就这些。Web Components 提供了干净、标准的组件化方案，适合构建设计系统、跨框架组件库或嵌入式小工具。虽然学习曲线略陡，但一旦掌握，就能写出真正独立、可维护的 UI 模块。
