构建可复用组件需封装、独立与易集成，Web Components 提供原生支持。1. 使用 Custom Elements 定义自定义标签，通过 customElements.define() 注册继承 HTMLElement 的类，实现自定义元素；2. 结合 Shadow DOM 隔离样式与结构，在构造函数中调用 attachShadow() 并设置 shadowRoot.innerHTML，避免全局污染；3. 支持属性与事件，通过 observedAttributes 监听属性变化，attributeChangedCallback 触发更新，dispatchEvent 派发事件实现交互；4. 组件可在任意项目中使用，不依赖框架，适合设计系统共享，关键在于属性同步、事件通信和样式封装。
构建可复用组件的关键在于封装、独立性和易集成。JavaScript 的 Web Components 技术提供了一套浏览器原生支持的 API，让你可以创建自定义 HTML 元素，并在任何框架或无框架项目中使用。以下是具体实现方式。
使用 Custom Elements 创建自定义标签
Custom Elements 允许你定义自己的 HTML 标签，这是构建可复用组件的基础。
通过 customElements.define() 方法注册一个类继承自 HTMLElement 的组件：
class MyButton extends HTMLElement {connectedCallback() {
if (!this.rendered) {
this.innerHTML = ``;
this.rendered = true;
}
}
}
customElements.define('my-button', MyButton);
之后就可以在 HTML 中直接使用：<my-button>提交</my-button>。
立即学习“Java免费学习笔记（深入）”；
结合 Shadow DOM 实现样式和结构隔离
Shadow DOM 能将组件的 DOM 和 CSS 封装起来，避免全局污染。
在组件构造函数中挂载 Shadow Root：
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
const title = this.getAttribute('title') || '默认标题';
this.shadowRoot.innerHTML = `
<style>
.card { border: 1px solid #ddd; padding: 16px; border-radius: 8px; font-family: sans-serif; }
</style>
<div class="card">
<h3>${title}</h3>
<slot></slot>
</div>
`;
}
}
customElements.define('my-card', MyCard);
使用时内容可通过 <slot> 插入：<my-card title="用户信息">姓名：张三</my-card>。
支持属性与事件，提升交互能力
为了让组件更灵活，应响应属性变化并对外派发事件。
利用 static get observedAttributes() 监听属性变更：
class MyInput extends HTMLElement {constructor() {
super();
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['label', 'value'];
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (oldValue === newValue) return;
this.render();
}
render() {
const label = this.getAttribute('label') || '输入框';
const value = this.getAttribute('value') || '';
this.shadowRoot.innerHTML = `
<label>${label}: <input value="${value}" /></label>
`;
this.shadowRoot.querySelector('input').addEventListener('input', e => {
this.dispatchEvent(new CustomEvent('change', { detail: e.target.value }));
this.setAttribute('value', e.target.value);
});
}
connectedCallback() {
this.render();
}
}
customElements.define('my-input', MyInput);
外部可监听事件：<my-input onchange="console.log(event.detail)"></my-input>。
基本上就这些。Web Components 不依赖任何框架，适合打造设计系统或跨项目共享组件。只要注意属性同步、事件通信和样式封装，就能写出真正可复用的元素。不复杂但容易忽略细节。
