網頁元件 v1 - 下一代

網頁元件將獲得跨瀏覽器支援,而且社群規模正在成長。此外,我們也提供全新的 Web Component 目錄,方便您找到真正需要的元件。

Taylor Savage
Taylor Savage

曾經想自行建構獨立的 JavaScript 元件 方便您在多個專案中輕鬆使用,或是與其他開發人員分享 他們使用什麼 JavaScript 架構?網頁元件可能符合您的需求。

網頁元件是一組新的網路平台功能,可以讓您 自己的 HTML 元素。每個新的自訂元素都可以有自訂標記,例如 <my-button>,而且內建元素的所有優點 - 自訂元素 可包含屬性和方法、觸發及回應事件 精心封裝風格和 DOM 樹,結合自己的外觀和風格。

紙張進度元素的動畫。

網頁元件提供了平台式、低階元件模型 建立及分享可重複使用的元素,從特殊按鈕到 提供更複雜的視圖由於網頁元件是以平台為基礎 在這個 API 中,您可以搭配使用強大的封裝基本功能 其他 JavaScript 程式庫或架構中的元件 標準 DOM 元素

您可能聽過網頁元件 - 網頁的早期版本 元件規格 - v0 - 已從 Chrome 出貨 33

如今,多虧了瀏覽器廠商之間的廣泛合作, 新一代的 Web 元件規格 (v1) 逐漸受到支援。 Chrome 支援構成網頁元件的兩大規格 - 陰影 DOM自訂 Elements - 截至 Chrome 53 為止 Chrome 54 版本。 Safari 開始支援 Safari 中的 Shaadow DOM v1 10,且已完成 實作自訂元素 v1 WebKit。Firefox 為 目前正在開發的陰影 DOM自訂 Elements v1,和/或 陰影 DOM自訂 Elements 我知道他們最近加入 Edge 的藍圖

如要使用第 1 版實作定義新的自訂元素,您只需建立 使用 ES6 語法擴充 HTMLElement 的新類別,並向 瀏覽器:

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

新的 v1 規格非常強大 - 我們整理了一系列教學課程 自訂元素 v1Shadow DOM v1 都能協助您 讓您踏出第一步

webcomponents.org

Web Component 社群也在大幅成長,我們非常期待 webcomponents.org 網站 - 網路元件社群,其中也包括開發人員適用的整合式目錄 分享自己的元素

webcomponents.org

webcomponents.org 網站包含網頁元件的相關資訊 規格、更新和網路內容 元件、元件和螢幕 開放原始碼的說明文件 元素集合 元素 其他開發人員的建構工作。

如要開始建立第一個元素,您可以使用 Google 的 Polymer,或直接使用低階網路 元件 API然後發布您的 元素

祝您有美好的穿搭時光!