網頁元件 v1 - 下一代

Web 元件正獲得跨瀏覽器支援,社群也正在快速成長,此外,我們還推出全新的 Web 元件目錄,方便您找到所需的元件。

Taylor Savage
Taylor Savage

您是否曾想過建構自己的自給自足 JavaScript 元件,以便在多個專案中輕鬆使用,或與其他開發人員共用,無論他們使用哪種 JavaScript 架構皆可?網頁元件可能適合您。

網頁元件是一組新的網路平台功能,可讓您自行建立 HTML 元素。每個新的自訂元素都可以有 <my-button> 這類自訂標記,並具備內建元素的所有優點:自訂元素可以有屬性和方法、觸發事件並回應事件,甚至可以有封裝的樣式和 DOM 樹狀結構,以便提供自己的外觀和感受。

paper-progress 元素的動畫。

Web 元件提供平台層級的低階元件模型,讓您建構及分享可重複使用的元素,適用於各種元件,從專用按鈕到日期選擇器等複雜檢視畫面。由於網頁元件是使用平台 API 建構而成,而這些 API 包含強大的封裝原始元素,因此您甚至可以在其他 JavaScript 程式庫或架構中使用這些元件,就如同標準 DOM 元素一樣。

您可能聽過 Web Components,這是 Web Components 規格 (v0) 的早期版本,已在 Chrome 33 中發布

如今,由於瀏覽器供應商之間的廣泛合作,下一代 Web 元件規格 (第 1 版) 獲得了廣泛的支援。Chrome 分別在 Chrome 53Chrome 54 中支援兩項主要的 Web 元件規格,分別是 Shadow DOM自訂元素。Safari 已推出 Shadow DOM v1 的支援功能,並完成在 WebKit 中實作自訂元素 v1。Firefox 目前正在開發 Shadow DOMCustom Elements v1,而 Shadow DOMCustom Elements 也都在 Edge 的路線圖中。

如要使用 v1 實作方式定義新的自訂元素,只要建立新的類別,並使用 ES6 語法擴充 HTMLElement,然後將其註冊至瀏覽器即可:

class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

新的 v1 規格功能強大,我們已彙整使用自訂元素 v1Shadow DOM v1 的教學課程,協助您快速上手。

webcomponents.org

Web 元件社群也正在快速成長。我們很高興看到更新版的 webcomponents.org 網站推出,這是網頁元件社群的重點網站,其中包含整合式目錄,供開發人員分享元素。

webcomponents.org

webcomponents.org 網站提供 Web 元件specsWeb 元件社群的更新和內容,以及開源元件和其他開發人員建立的元件集合相關說明文件。

您可以使用 Google 的 Polymer 等程式庫,開始建構第一個元素,也可以直接使用低階 Web 元件 API。接著,請在 webcomponents.org 上發布元素

祝您組件化順利!