构建可复用组件需封装、独立与易集成，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 中直接使用：
立即学习“Java免费学习笔记（深入）”；
结合 Shadow DOM 实现样式和结构隔离
Shadow DOM 能将组件的 DOM 和 CSS 封装起来，避免全局污染。
在组件构造函数中挂载 Shadow Root：
本文档主要讲述的是Sencha touch 开发指南；主要介绍如何使用Sencha Touch为手持设备进行应用开发，主要是针对iPhone这样的高端手机，我们会通过一个详细的例子来介绍整个开发的流程。 Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app，用户界面组件和数据管理全部基于HTML5和CSS3的web标准，全面兼容Android和Apple iOS。希望本文档会给有需要的朋友带来帮助；感兴趣的
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
const title = this.getAttribute('title') || '默认标题';
this.shadowRoot.innerHTML = `
${title}
`;
}
}
customElements.define('my-card', MyCard);
使用时内容可通过
支持属性与事件，提升交互能力
为了让组件更灵活，应响应属性变化并对外派发事件。
利用 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 = `
`;
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);
外部可监听事件：
基本上就这些。Web Components 不依赖任何框架，适合打造设计系统或跨项目共享组件。只要注意属性同步、事件通信和样式封装，就能写出真正可复用的元素。不复杂但容易忽略细节。
