目錄

• Custom Elements
• Shadow DOM
• HTML Templates
• HTML Imports

---

HTML5 Web Components技術是一組相關標準和API的集合，旨在增強Web開發中的組件化能力，允許開發者創建可重用、封裝良好的自定義UI組件，這些組件擁有獨立的視圖層（樣式）、邏輯（行為）和結構（模板）。Web Components主要包括以下四個核心技術：

Custom Elements（自定義元素）

Custom Elements允許開發者定義自己的HTML標簽，擴展了HTML的語義化標記體系。通過創建新的元素類并注冊到瀏覽器中，開發者可以創建具有特定功能和行為的自定義組件，如 <my-accordion>、<x-carousel> 等。這些自定義元素可以像內置HTML元素一樣在頁面中直接使用，具有完整的生命周期管理，包括：

constructor()：當元素被創建時調用。
connectedCallback()：當元素被插入到DOM中時調用。
disconnectedCallback()：當元素從DOM中移除時調用。
adopted