Web Components 是浏览器原生支持的组件化标准，由 Custom Elements、Shadow DOM 和 HTML Templates 三大技术组成，实现可复用、自治、隔离的 UI 单元；它无需框架即可跨平台运行，支持跨框架使用与 SEO，是补足底层能力的原生组件化方案。
JavaScript 实现组件化，核心是封装可复用、自治、隔离的 UI 单元；Web Components 是浏览器原生支持的一套标准 API，让开发者能创建真正独立的自定义 HTML 元素。
Web Components 的三大基础技术
它不是单一技术，而是由三个规范协同工作的组合：
-
Custom Elements：定义和注册自定义 HTML 标签（如
<my-button>），支持生命周期回调（connectedCallback、disconnectedCallback等） - Shadow DOM：为组件提供样式与结构的局部作用域，内部 CSS 不会泄露，外部样式也默认进不去，实现真正的样式隔离
-
HTML Templates（
<template>和<slot>）：声明不立即渲染的 DOM 片段，配合<slot>实现内容分发（类似 Vue 的 slot 或 React 的 children）
一个最简 Web Component 示例
以下代码定义了一个带默认文本、可接收属性、有自己样式的按钮组件：
class MyButton extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const template = document.createElement('template');
template.innerHTML = `
<style>
button { background: #007bff; color: white; border: none; padding: 8px 16px; }
</style>
<button><slot>Click me</slot></button>
`;
shadow.appendChild(template.content.cloneNode(true));
}
static get observedAttributes() {
return ['disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'disabled') {
this.shadowRoot.querySelector('button').disabled = newValue !== null;
}
}
}
customElements.define('my-button', MyButton);
使用时只需：<my-button disabled>Submit</my-button>，它会自动渲染、响应属性变化，且样式不会影响页面其他部分。
立即学习“Java免费学习笔记（深入）”；
为什么说它是“原生组件化”
不同于 React/Vue 等框架的组件抽象，Web Components 直接运行在浏览器引擎层：
- 无需框架即可在任何现代浏览器中运行（Chrome 54+、Firefox 63+、Safari 10.1+、Edge 79+）
- 组件可跨框架使用（React 项目里能直接用
<my-input>，Vue 项目也能用） - 天然支持 HTML 语义、可访问性（a11y）、SEO，因为本质就是扩展的 HTML 元素
实际开发中怎么用更高效
纯原生写法略繁琐，推荐结合工具提升体验：
- 用 lit（轻量级库）简化模板、响应式属性、更新逻辑，几行代码就能写出高性能组件
- 用 Storybook 单独开发和测试组件，不依赖主应用上下文
- 通过 npm 包 + 自定义元素名前缀（如
my-company-button）避免命名冲突，便于团队共享组件库
基本上就这些。不复杂但容易忽略的是：Web Components 不是替代框架，而是补足底层能力——它让组件真正“可移植”，也让框架更专注上层交互逻辑。
