以下是關于 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
