2019 年 I/O 大會 Web 元件
在 2019 年 Google I/O 大會上，Polymer Project 與 Caridy Patiño 的 Kevin Schaaf 暢談 Web 元件的狀態。
網頁元件的熱門程度如何？
如果你今天用過網路，或許也用過網頁元件。根據我們的計數，目前所有網頁載入約佔網頁載入量的 5% 到 8% 之間會使用一或多個網頁元件。因此，網路元件是過去五年內最成功的全新網路平台功能之一。
您可以在常用的網站 (例如 YouTube 和 GitHub) 找到網頁元件。許多用 AMP 製作的新聞和發布網站也會使用這種 Cookie，AMP 元件也是網路元件。而許多企業也會採用網路元件。
什麼是網頁元件？
那麼網頁元件是什麼？網頁元件規格提供一組低階 API，可讓您擴充瀏覽器內建的 HTML 代碼組合。網頁元件提供以下功能：
- 建立元件的常用方法 (使用標準 DOM API)。
- 接收和傳送資料的常見方式 (使用屬性/事件)。
因此除了標準介面外，這些標準並未說明元件實際實作方式：
- 用來建立 DOM 的轉譯引擎。
- 如何根據屬性或屬性變更自行更新。
換句話說，網頁元件會告訴瀏覽器製作元件的「時機」和「位置」，但與「做法」無關。
作者可以選擇功能化的轉譯模式 (例如 React)，藉此建構網頁元件，也可以使用 Angular 或 Vue 等宣告式範本。身為作者，您可以自由選擇在元件內使用的技術，同時保有互通性。
網頁元件有哪些優點？
網路元件和專屬元件系統之間的主要差異在於互通性。由於其標準介面，您可以在任何使用內建元素 (例如 <input> 或 <video>) 的地方使用網頁元件。
因為這類廣告能以真實的 HTML 表示，而且可以透過所有熱門架構呈現。因此，您可以在不限定單一架構的情況下，在更多類型的應用程式中更廣泛地使用元件。
由於元件介面為標準版本，因此運用不同程式庫實作的網頁元件，可以在同一個頁面上混用。這項資訊可協助您更新技術堆疊，確保應用程式與時俱進。您不必逐一更換架構，而是一次更新一個元件，不必在架構之間大幅更改。
誰在使用網頁元件？
因此，基於上述所有原因，網頁元件實際上在各種使用情境下都能獲得極大的成功。以下三種用途特別受歡迎：內容網站、設計系統和企業應用程式。
內容網站
網頁元件是循序漸進的完美技術，因為許多 CMS 系統都可將網頁元件以標準 HTML 格式輸出。
AMP 就是很好的例子，您可以瞭解網頁元件如何快速輕鬆地排入發布產業的基礎架構中，以便提供內容。
設計系統
越來越多的公司開始利用設計系統統一自己的呈現方式，這一套元件和指南能定義公司網站和應用程式的常見外觀和風格。網頁元件也非常適合在這裡。
設計人員通常需要與許多團隊討論，在 React、Angular 及其他所有架構的基礎上，建構自己的設計系統元件版本，而不是使用一組標準元件。
網頁元件就是答案。我們只需要編寫一次，即可在任何地方執行元件系統，但應用程式團隊仍可自由運用自己選擇的架構
ING、EA 和 Google 等公司都在網頁元件中實作自家公司的設計語言，
Enterprise：Salesforce 的網頁元件
網頁元件也在企業內部也取得相當卓越的進展，成為一套安全且符合未來趨勢的技術，可用於標準化。Salesforce 使用者介面平台架構師 Caridy Patiño，說明他們為何用網頁元件建構使用者介面平台。
Salesforce 是一組應用程式，其中許多都是來自收購的應用程式。每種方法都可以用各自的技術堆疊執行。因為這些元件建置在不同的堆疊上，因此很難讓它們獲得相同的外觀和風格。此外，Salesforce 讓客戶能透過 Salesforce 平台自行建構自訂應用程式。因此，在理想情況下，外部開發人員也應能使用這些元件。
Salesforce 根據自家平台客戶找出了下列一系列需求：
- 標準解決方案 (而非專屬解決方案) 可讓您更輕鬆地找到經驗豐富的開發人員，並能更快適應新的開發人員規模。
- 常見的元件模型：因此，自訂任何 Salesforce 應用程式的運作方式都相同。
同時也發現客戶「不喜歡」的部分：
- 元件和應用程式的破壞性變更。換句話說，您必須確保回溯相容性。
- 使用舊技術，無法與時俱進。
- 困在圍牆內的花園中。
我們以網頁元件做為新版 UI 平台的基礎，能夠滿足上述所有需求，最終成果為新的 Lightning Web 元件。
開始使用網頁元件
提供許多協助您開始使用網頁元件的方式。
如要建構網頁應用程式，請考慮使用許多現成的網路元件。以下提供幾個例子謹供參考：
- Google 將自己的 Material Design 系統設計成網頁元件：Material Web 元件。
- 有線元素是一組很酷的網頁元件，擁有令人不安的手繪外觀。
- 您可以使用
<model-viewer>等特殊用途的網頁元件，將其置入任何應用程式以新增 3D 內容。
如果你為公司開發設計系統，或想提供可在任何環境中使用的單一元件或程式庫，請考慮使用網頁元件編寫元件。您可以使用內建的網頁元件 API，但這類 API 非常低階，因此有很多程式庫可用，可讓您簡化整個程序。
如要開始建構自己的元件，請參考 Google 開發的網路元件基礎類別 LitElement，其功能與 React 的相似，可提供良好的轉譯體驗。
其他應考慮使用的工具和程式庫：
- Stencil 是以網頁元件為優先的架構。內含多個熱門架構功能，例如 JSX 和 TypeScript
- Angular Elements 可讓您將 Angular 元件包裝為網頁元件。
- Vue.js 網頁元件包裝函式可讓您將 Vue 元件封裝為網頁元件。
其他資源：
- open-wc.org 提供實用的入門資訊，以及有關建構和開發工具的提示和預設設定。
- 網站基礎知識提供基本網路元件 API 入門介紹，以及設計網路元件的最佳做法。
- MDN 提供網路元件 API 的參考文件，以及一些教學課程。\
主頁橫幅由 Jason Tuinstra 在 Unsplash 上。
編輯者附註：更新自訂元素用量圖表，可顯示 chromestatus.com 回報的完整每月用量資料。本文的前一版文章包含按 6 個月精細程度顯示的圖表，且不包含最近幾個月的圖表。原始圖表中的 V0 和 V1 系列已堆疊；現在會以未堆疊的方式顯示這些序列，以消除模稜兩可的情況。由於 chromestatus.com 的資料收集系統有所變更，2017 年底會突然跳轉。這項異動會影響所有網路平台功能的統計資料，日後也能產生更準確的評估結果。