以下是关于 Web Components 开发与集成 的系统知识梳理，涵盖核心概念、高级特性、集成与优化等内容：
一、Web Components 核心概念
| 技术 | 作用 | 核心 API |
|---|---|---|
| Custom Elements | 定义可复用的自定义 HTML 元素 | customElements.define()、生命周期钩子（connectedCallback 等） |
| Shadow DOM | 封装组件内部 DOM 和样式，避免全局污染 | Element.attachShadow({ mode: 'open' })、:host 伪类 |
| HTML Templates | 声明可复用的 HTML 片段 | <template> 标签、document.importNode() |
| HTML Imports | （已废弃）模块化加载组件，现被 ES Modules 替代 | <link rel="import" href="component.html">（历史方案） |
二、基础开发流程
1. 创建自定义元素
class MyButton extends HTMLElement {constructor() {super();// 创建 Shadow DOMthis.attachShadow({ mode: 'open' });// 添加模板内容this.shadowRoot.innerHTML = `<style>button { color: red; }</style><button><slot></slot></button>`;}// 生命周期：元素插入 DOM 时触发connectedCallback() {this.shadowRoot.querySelector('button').addEventListener('click', this.handleClick);}// 生命周期：元素从 DOM 移除时触发disconnectedCallback() {this.shadowRoot.querySelector('button').removeEventListener('click', this.handleClick);}handleClick = () => {this.dispatchEvent(new CustomEvent('my-click', { detail: 'Clicked!' }));};
}// 注册自定义元素
customElements.define('my-button', MyButton
