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 结构。
这些技术结合使用，能创建真正独立、可移植的组件。
创建一个简单的可复用按钮组件
下面通过一个自定义的
立即学习“Java免费学习笔记（深入）”；
class MyButton extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
this.attachShadow({ mode: 'open' });
<pre class='brush:php;toolbar:false;'>// 获取按钮文本，支持默认值
const label = this.getAttribute('label') || '点击我';
// 定义模板结构
this.shadowRoot.innerHTML = `
<style>
button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
<button>${label}</button>
`;}
// 监听属性变化 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 中直接使用：
<my-button label="提交" id="btn"></my-button>
<p><script>
document.getElementById('btn').addEventListener('click', () => {
alert('按钮被点击！');
});
</script></p>提升组件灵活性：使用 template 和 slot
如果希望内容更灵活，比如支持图标或其他 HTML 元素，可以使用
this.shadowRoot.innerHTML = `
<style>
button {
/* 样式保持不变 */
}
</style>
<button><slot></slot></button>
`;
然后这样使用：
<my-button> <span>✅ 提交</span> </my-button>
内容会自动插入到
最佳实践与技巧
- 命名规范：自定义元素名称必须包含短横线（如 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 那样生态丰富，但在构建轻量级、框架无关的可复用组件时非常实用，尤其适合设计系统、微前端或嵌入式小工具场景。不复杂但容易忽略细节，掌握后能显著提升代码复用能力。
