2019 年 I/O 大會的網路元件
在 2019 年 Google I/O 大會上，Polymer 專案的 Kevin Schaaf 和 Salesforce 的 Caridy Patiño 討論了網頁元件的狀態。
網頁元件有多受歡迎？
如果您今天使用過網路，那麼您可能也使用過網路元件。根據我們的統計，目前有 5% 到 8% 的網頁載入作業會使用一或多個 Web 元件。這也讓網頁元件成為過去五年最成功的新網頁平台功能之一。
您可能會在每天都會使用的網站 (例如 YouTube 和 GitHub) 中找到網頁元件。許多使用 AMP 建構的新聞和出版網站也使用 AMP 元件，因為 AMP 元件也是網路元件。許多企業也採用網頁元件。
什麼是網頁元件？
那麼，什麼是網頁元件？Web 元件規格提供一組低階 API，可讓您擴充瀏覽器內建的 HTML 標記。網頁元件提供以下功能：
- 建立元件的常用方法 (使用標準 DOM API)。
- 接收和傳送資料的常用方式 (使用資源/事件)。
除了標準介面之外，標準並未說明元件實際的實作方式：
- 用於建立 DOM 的轉譯引擎。
- 如何根據屬性或屬性變更進行更新。
換句話說，Web 元件會告訴瀏覽器「何時」和「何處」建立元件，但不會說明「如何」。
作者可以選擇功能性算繪模式，就像使用 React 建構網頁元件一樣，也可以使用宣告式範本，就像在 Angular 或 Vue 中一樣。作者可以自由選擇在元件中使用的技術，同時維持互通性。
網頁元件有何用途？
網頁元件與專屬元件系統之間的主要差異在於互通性。由於這些元件具有標準介面，因此您可以在使用 <input> 或 <video> 等內建元素的任何位置使用網頁元件。
由於這些元素可用於表示真正的 HTML，因此所有熱門架構都能轉譯這些元素。因此，您可以更廣泛地在更多元的應用程式中使用元件，而不會將使用者鎖定在任何一個架構中。
由於元件介面是標準介面，因此使用不同程式庫實作的網路元件可在同一頁面上混合使用。這有助於您在更新技術堆疊時，確保應用程式永不過時。您可以一次更新一個元件，而非在不同架構之間進行大規模變更，這樣就不必一次更換所有元件。
誰在使用網頁元件？
因此，在上述種種因素的影響下，網頁元件在各種不同用途中都獲得了巨大成功。其中三種用途特別受歡迎：內容網站、設計系統和企業應用程式。
內容網站
網路元件是逐步改善內容的完美技術，因為無數 CMS 系統已可將網路元件輸出為標準 HTML。
AMP 就是一個很好的例子，說明網頁元件如何快速且輕鬆地融入出版業的基礎架構，用於提供內容。
設計系統
越來越多公司使用設計系統來統一品牌形象，設計系統是一組元件和規範，可為機構的網站和應用程式定義共同的外觀和感受。網頁元件也非常適合用於這類情況。
設計師經常必須面對許多團隊在 React、Angular 和所有其他架構上，自行建構設計系統元件版本，而非使用單一標準元件。
網頁元件就是答案，這是真正可「一次編寫、隨處執行」的元件系統，讓應用程式團隊可以自由使用所選架構
ING、EA 和 Google 等公司已在 Web 元件中實作自家設計語言。
企業：Salesforce 的 Web 元件
網頁元件也是企業內部的重要趨勢，因為這是安全且具前瞻性的技術，可用於標準化。Salesforce 使用者介面平台架構師 Caridy Patiño 說明瞭為何使用網頁元件建構使用者介面平台。
Salesforce 是一組應用程式，其中許多是收購而來。每個應用程式都可能在各自的技術堆疊上執行。由於這些應用程式是使用不同的堆疊建構，因此很難讓這些應用程式都擁有相同的外觀。此外，Salesforce 也讓客戶可以使用 Salesforce 平台建立自訂應用程式。因此，理想情況下，外部開發人員也應能使用這些元件。
Salesforce 發現平台客戶有以下需求：
- 標準解決方案，而非專屬解決方案，這樣就能更輕鬆找到有經驗的開發人員，並快速培訓新開發人員。
- 通用元件模型，因此您可以以相同方式自訂任何 Salesforce 應用程式。
他們也找出消費者不想要的內容：
- 對元件和應用程式做出破壞性變更。換言之，回溯相容性是必要條件。
- 使用過時的技術，無法進行改良。
- 受限於封閉式生態系統。
使用網頁元件做為新 UI 平台的基礎，可滿足所有這些需求，而這就是全新的 Lightning Web Components。
開始使用網頁元件
您可以透過許多絕佳方式開始使用網頁元件。
如果您正在建構網頁應用程式，請考慮使用一些現成的網頁元件。以下提供幾個例子謹供參考：
- Google 將自家的 Material Design 系統做為網頁元件販售：Material Web 元件。
- Wired Elements 是一組很酷的網頁元件，具有手繪風格的粗略外觀。
<model-viewer>等專用網頁元件非常實用，您可以將這些元件加入任何應用程式，以便新增 3D 內容。
如果您要為公司開發設計系統，或是要販售可在任何環境中使用的單一元件或程式庫，建議您使用 Web 元件撰寫元件。您可以使用內建的 Web 元件 API，但這些 API 相當低階，因此有許多程式庫可用來簡化這個程序。
如要開始建構自己的元件，可以查看 LitElement，這是 Google 開發的網頁元件基礎類別，提供與 React 類似的功能性算繪體驗。
其他可考慮的工具和程式庫：
- Stencil 是一種以網頁元件為優先的架構。其中包含 JSX 和 TypeScript 等熱門架構功能
- Angular Elements 提供一種方法，可將 Angular 元件包裝為網頁元件。
- Vue.js 網頁元件包裝函式提供將 Vue 元件封裝為網頁元件的方法。
更多資源：
- open-wc.org 提供實用的新手上路資訊，以及建構和開發工具的訣竅和預設設定。
- 網站基礎知識提供基本網頁元件 API 的入門資訊，以及設計網頁元件的最佳做法。
- MDN 提供網頁元件 API 的參考文件，以及一些教學課程。\
主頁橫幅圖片由 Jason Tuinstra 提供，來源：Unsplash。
編輯者附註：自訂元素用量圖表已更新，以便顯示 chromestatus.com 所回報的完整月度用量資料。這篇文章的舊版包含 6 個月精細度的圖表，但沒有最近幾個月的資料。原始圖表中的 V0 和 V1 序列是堆疊的，現在則會以不堆疊的方式顯示，並加上總計線，以消除模糊性。2017 年底的突然竄升，是因為 chromestatus.com 的資料收集系統發生變更，這項變更影響了所有網頁平台功能的統計資料，並導致日後的評估結果更加準確。