網頁元件正受到跨瀏覽器支援、這個社群正迅速成長，還有一個全新的 Web Component 目錄，可用於找到您需要的元件。
是否曾想自行建構獨立的 JavaScript 元件，方便您跨多個專案使用或與其他開發人員共用，無論所使用的 JavaScript 架構為何？網頁元件可能適合你。
網頁元件是一組新的網路平台功能，可用來建立自己的 HTML 元素。每個新自訂元素都可以有 <my-button> 等自訂標記，且內建元素的所有優點：自訂元素可包含屬性和方法、觸發和回應事件，甚至還有封裝樣式和 DOM 樹狀結構，讓您打造自己的外觀和風格。
網頁元件提供平台式的低階元件模型，可讓您建構及分享可重複使用的元素，包括特殊按鈕和日期挑選器等複雜檢視畫面。由於網頁元件是使用平台 API (內含強大的封裝基元) 所建構，因此您甚至可以在其他 JavaScript 程式庫或架構中使用這些元件，就像這些元件是標準 DOM 元素一樣。
您可能已經聽說過網頁元件規格，這個舊版網頁元件規格 (v0) 是在 Chrome 33 中推出。
如今，由於瀏覽器廠商之間的廣泛合作，新一代 Web 元件規格 (v1) 目前已獲得廣泛支援。Chrome 支援構成網頁元件的兩種主要規格，分別是陰影 DOM 和自訂元素，以及 Chrome 53 和 Chrome 54 版。 Safari 已支援 Safari 10 中的 Shadow DOM v1，且已完成 WebKit 中的自訂元素 v1 實作。Firefox 目前正在開發陰影 DOM 和 Custom Elements v1，而 Shadow DOM 和 Custom Elements 也在 Edge 的發展藍圖中。
如要使用 v1 實作定義新的自訂元素，只需建立使用 ES6 語法擴充 HTMLElement 的新類別，並向瀏覽器註冊即可：
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
新的 v1 規格非常強大，我們特地彙整了使用自訂元素 v1 和 Shadow DOM v1 的教學課程，協助您快速上手。
webcomponents.org
Web Component 社群的規模也不斷成長。我們很高興看到推出新版 webcomponents.org 網站，網站元件社群成為網頁元件社群的焦點，其中包括可供開發人員共用元素的整合式目錄。
webcomponents.org 網站提供多項資訊，包括網頁元件規格、網頁元件社群的更新和內容，以及其他開發人員建構的開放原始碼元素和元素集合相關說明文件。
開始利用 Google 的 Polymer 等程式庫，或直接直接使用低階 Web Component API 建構第一個元素。然後在 webcomponents.org 發布元素。
祝您組件愉快！