Web Components 自訂元素
Web Components 自訂元素初學教學 我使用了一個叫作 CSS Doodle 的 CSS 函式庫創建了我的第一個自訂元素。這是一個很棒的應用，它使用自訂元素讓你創建令人驚艷的 CSS 動畫效果。這激發了我對於了解底層原理的慾望。所以我決定更深入地研究 Web Components，這是一個很多人請我寫的主題。 自訂元素讓我們可以創建新的 HTML 標籤。 我一開始無法想像這有什麼用處，直到我使用了 CSS Doodle 函式庫。畢竟，我們已經有很多標籤了。 這篇教學涵蓋了 Custom Elements 第 1 版，也就是寫作時間的最新版本。 使用自訂元素，我們可以創建一個自訂的 HTML 標籤，並與 CSS 和 JavaScript 相關聯。 這不是 React、Angular 或 Vue 等框架的替代方案，而是一個全新的概念。 window 全局物件暴露了 customElements 屬性，這讓我們可以訪問 CustomElementRegistry 物件。 CustomElementRegistry 物件 這個物件有幾個方法可以用來註冊自訂元素和查詢已註冊的自訂元素： define() 用於定義新的自訂元素 get() 用於獲取自訂元素的構造函數（如果不存在則返回 undefined） upgrade() 用於升級自訂元素 whenDefined() 用於獲取自訂元素的構造函數。類似於 get()，但它返回的是一個 promise，當該項目可用時解析。 如何創建自訂元素 在我們呼叫 window.customElements.define() 方法之前，我們必須通過創建一個新的類來定義一個新的 HTML 元素，並繼承 HTMLElement 內建類： class CustomTitle extends HTMLElement { //....