JavaScript Web Components组件化

JavaScript Web Components 是一套基于浏览器原生支持的组件化技术，通过 Custom Elements、Shadow DOM 和 HTML Templates 三项核心技术的组合，实现高内聚、可复用、跨框架的前端组件开发。

1. Custom Elements（自定义元素）

   功能：允许开发者定义全新的 HTML 标签，扩展原生元素功能。

   实现方式：

   创建继承自 HTMLElement 的类，通过 customElements.define(tagName, className) 注册组件。

   示例：定义 <my-card> 组件，通过 getAttribute() 获取属性值并动态渲染内容。

   代码片段：

   class MyCard extends HTMLElement { constructor() { super(); this.innerHTML = `<h2>${this.getAttribute('title') || '默认标题'}</h2>`; }}customElements.define('my-card', MyCard);

2. Shadow DOM（影子 DOM）

   功能：提供样式与结构的隔离，避免组件内部样式与外部冲突。

   实现方式：

   在组件构造函数中调用 this.attachShadow({ mode: 'open' }) 创建 Shadow Root。

   将模板内容插入 Shadow Root，确保样式仅作用于组件内部。

   示例：定义 <my-button> 组件，其样式不会影响外部或被外部污染。

   代码片段：

   class MyButton extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = `<style> button { background: blue; } </style><button>点击</button>`; }}customElements.define('my-button', MyButton);

3. HTML Templates（模板标签）

   功能：通过 <template> 标签声明可复用的静态结构，延迟渲染以提升性能。

   实现方式：

   在模板中定义组件的 HTML 结构和样式，通过 cloneNode(true) 克隆并插入 Shadow Root。

   使用 <slot> 实现内容分发，支持动态插入外部内容。

   示例：定义卡片模板，通过插槽动态填充标题和内容。

   代码片段：

   <template id="card-template"> <style> .card { border: 1px solid #ddd; } </style> <div class="card"> <h3><slot name="title">默认标题</slot></h3> <p><slot name="content">默认内容</slot></p> </div></template>const template = document.getElementById('card-template');const clone = template.content.cloneNode(true);this.shadowRoot.appendChild(clone);

1. 属性监听与生命周期回调

   生命周期钩子：

   connectedCallback：组件插入 DOM 时触发，用于初始化逻辑。

   disconnectedCallback：组件移除时触发，用于清理资源。

   attributeChangedCallback：监听属性变化，实现响应式更新。

   属性监听配置：

   通过静态方法 observedAttributes 声明需监听的属性列表。

   示例：监听 theme 属性变化，动态切换背景色。

   代码片段：

   static get observedAttributes() { return ['theme']; }attributeChangedCallback(name, oldValue, newValue) { if (name === 'theme') { this.shadowRoot.querySelector('.card').style.backgroundColor = newValue === 'dark' ? '#333' : '#fff'; }}

2. 插槽（Slot）的使用

   功能：允许外部内容动态插入组件内部指定位置，提升灵活性。

   实现方式：

   在模板中定义 <slot name="slotName">，外部通过 <div slot="slotName"> 填充内容。

   示例：卡片组件通过插槽自定义标题和内容。

   代码片段：

   <my-card> <div slot="title">自定义标题</div> <div slot="content">自定义内容</div></my-card>

1. 核心优势

   跨框架兼容：原生支持浏览器，无需依赖 React、Vue 等框架，可直接集成到任何项目。

   样式隔离：Shadow DOM 确保组件样式独立，避免全局污染。

   高复用性：通过 Custom Elements 定义标准化组件，一次开发多处使用。

2. 典型应用场景

   企业级 UI 库：构建可复用的按钮、卡片、弹窗等基础组件。

   微前端架构：作为独立模块嵌入不同技术栈的子应用。

   第三方组件开发：创建无需依赖框架的插件或工具组件。

1. Shadow Root 管理

   确保在构造函数中正确初始化 Shadow DOM，避免重复创建或未创建导致的错误。

   使用 mode: 'open' 允许外部 JavaScript 访问 Shadow DOM（如需调试）。

2. 性能优化

   避免在 attributeChangedCallback 中执行高频操作（如复杂 DOM 操作）。

   使用 requestAnimationFrame 批量更新样式或属性。

3. 浏览器兼容性

   现代浏览器（Chrome、Firefox、Edge、Safari）均支持 Web Components，但需注意旧版浏览器的 polyfill 方案（如 @webcomponents/webcomponentsjs）。

通过合理组合 Custom Elements、Shadow DOM 和 HTML Templates，开发者可以构建出封装良好、样式隔离、复用性强的 Web 组件，适用于现代前端开发的多样化需求。