Web Components 是一套浏览器原生 API，包括 Custom Elements、Shadow DOM 和 HTML Templates，可创建封装性强、可复用的自定义元素。通过定义类继承 HTMLElement 并使用 attachShadow 创建影子 DOM，结合 innerHTML 设置结构与样式，实现逻辑与视图隔离。支持通过 observedAttributes 监听属性变化，利用 slot 插槽机制增强内容灵活性，并可通过 CSS 变量暴露主题接口。需注意命名含短横线、合理设计事件通信与样式透出，适用于跨框架组件复用场景。
在现代前端开发中，构建可复用的 UI 组件是提升开发效率和维护性的关键。Web Components 提供了一套原生浏览器支持的技术，让我们无
需依赖框架就能创建封装良好、可复用的自定义元素。使用 JavaScript 即可实现样式隔离、逻辑封装和标签自定义，非常适合需要跨项目或跨框架使用的场景。
什么是 Web Components？
Web Components 是一组浏览器原生 API 的统称，主要包括：
- Custom Elements：允许我们定义自己的 HTML 标签。
- Shadow DOM：提供 DOM 和样式的隔离，避免全局污染。
- HTML Templates（）：声明不会立即渲染的可复用 HTML 结构。
这些技术结合使用，能创建真正独立、可移植的组件。
创建一个简单的可复用按钮组件
下面通过一个自定义的
class MyButton extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
this.attachShadow({ mode: 'open' });
// 获取按钮文本，支持默认值
const label = this.getAttribute('label') || '点击我';
// 定义模板结构
this.shadowRoot.innerHTML = `
zuojiankuohaophpcnstyleyoujiankuohaophpcn
button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
zuojiankuohaophpcn/styleyoujiankuohaophpcn
zuojiankuohaophpcnbuttonyoujiankuohaophpcn${label}zuojiankuohaophpcn/buttonyoujiankuohaophpcn
`;}
// 监听属性变化
static get observedAttributes() {
return ['label', 'disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'label') {
this.shadowRoot.querySelector('button').textContent = newValue;
} else if (name === 'disabled') {
const button = this.shadowRoot.querySelector('button');
button.disabled = newValue !== null;
button.style.opacity = newValue !== null ? 0.6 : 1;
}
}
// 自定义方法
click() {
this.shadowRoot.querySelector('button').click();
}
}
// 注册自定义元素
customElements.define('my-button', MyButton);
注册后即可在 HTML 中直接使用：
提升组件灵活性：使用 template 和 slot
如果希望内容更灵活，比如支持图标或其他 HTML 元素，可以使用
this.shadowRoot.innerHTML = `
`;
然后这样使用：
✅ 提交
内容会自动插入到
最佳实践与技巧
- 命名规范：自定义元素名称必须包含短横线（如 my-button），避免与标准 HTML 标签冲突。
- 属性与事件通信：通过 attributeChangedCallback 响应属性变化，使用 this.dispatchEvent(new CustomEvent(...)) 触发自定义事件。
- 样式隔离：Shadow DOM 天然隔离样式，但注意外部无法轻易覆盖内部样式，需提前设计好 CSS 变量接口。
- CSS 变量支持主题：可在 Shadow DOM 中使用 CSS 自定义属性，便于外部定制外观：
button {
background-color: var(--my-button-bg, #007bff);
}
外部使用时：
my-button {
--my-button-bg: green;
}
基本上就这些。Web Components 虽不如 React 或 Vue 那样生态丰富，但在构建轻量级、框架无关的可复用组件时非常实用，尤其适合设计系统、微前端或嵌入式小工具场景。不复杂但容易忽略细节，掌握后能显著提升代码复用能力。
