2019 年 I/O 大會的網頁元件
發布日期：2019 年 6 月 18 日
在 2019 年 Google I/O 大會上，Polymer 專案的 Kevin Schaaf 和 Salesforce 的 Caridy Patiño 討論了網頁元件的狀態。
網頁元件有多熱門？
如果您今天使用過網路，可能就用過網路元件。據我們統計，目前所有網頁載入作業中，有 5% 到 8% 使用一或多個網頁元件。因此，網頁元件是過去五年來，最成功的新網頁平台功能之一。
您可能每天都會使用 YouTube 和 GitHub 等網站，這些網站都採用網頁元件。許多以 AMP 建立的新聞和發布網站也使用這些元件，因為 AMP 元件也是網頁元件。許多企業也採用網頁元件。
什麼是網頁元件？
那麼，什麼是網頁元件？網頁元件規格提供一組低階 API，可讓您擴充瀏覽器的內建 HTML 標記集。網頁元件提供下列功能：
- 建立元件的常見方法 (使用標準 DOM API)。
- 接收及傳送資料的常見方式 (使用屬性/事件)。
除了標準介面之外，標準並未說明元件的實際實作方式：
- 用來建立 DOM 的算繪引擎。
- 如何根據屬性或屬性的變更內容更新自身。
換句話說，網頁元件會告知瀏覽器何時和何處要建立元件，但不會說明如何建立。
作者可以選擇與 React 相同的函式轉譯模式來建構網頁元件，也可以使用宣告式範本，就像 Angular 或 Vue 中的範本一樣。作者可以完全自由地選擇要在元件中使用的技術，同時維持互通性。
網頁元件的用途為何？
網頁元件與專有元件系統的主要差異在於互通性。由於網頁元件採用標準介面，因此您可以在任何使用內建元素 (例如 <input> 或 <video>) 的位置使用網頁元件。
由於這些元素可以表示為實際的 HTML，因此所有熱門架構都能算繪這些元素。因此，您的元件可以更廣泛地用於更多元的應用程式，使用者不必受限於任何單一架構。
由於元件介面是標準介面，因此使用不同程式庫實作的網頁元件可以在同一頁面上混合使用。更新技術堆疊時，這項事實有助於確保應用程式永不過時。您不必在一個架構和另一個架構之間進行大幅變更，也不必替換所有元件，而是可以一次更新一個元件。
誰在使用網頁元件？
因此，網頁元件在各種用途中都大獲成功。其中以內容網站、設計系統和企業應用程式最受歡迎。
內容網站
網頁元件是逐步強化內容的理想技術，因為無數 CMS 系統都能輸出標準 HTML。
AMP 是絕佳範例，說明網頁元件如何快速輕鬆地整合至發布業的基礎架構，以提供內容。
設計系統
越來越多公司採用設計系統 (一組元件和指南，可定義機構網站和應用程式的共同外觀風格)，統一呈現自身形象。網頁元件也很適合用於此處。
設計師通常必須與許多團隊競爭，這些團隊會以 React、Angular 和所有其他架構為基礎，建構自己的設計系統元件版本，而不是使用單一組標準元件。
網頁元件就是解決方案，這個元件系統可讓應用程式團隊自由選擇架構，而且只要編寫一次，就能在任何地方執行
ING、EA 和 Google 等公司都在網頁元件中導入自家公司的設計語言。
企業：Salesforce 的網頁元件
此外，網頁元件也以安全且具前瞻性的技術，在企業內部實現標準化，因此獲得顯著進展。Salesforce UI 平台架構師 Caridy Patiño 說明瞭他們為何使用網頁元件建構 UI 平台。
Salesforce 是一系列應用程式，其中許多是透過收購取得。這些服務可能各自採用不同的技術堆疊。由於建構基礎不同，很難讓所有應用程式的外觀和風格一致。此外，Salesforce 也允許客戶使用 Salesforce 平台建構自己的自訂應用程式。因此，理想情況下，外部開發人員也應能使用這些元件。
Salesforce 發現平台客戶有以下需求：
- 採用標準解決方案，而非專有解決方案，因此更容易找到經驗豐富的開發人員，也能更快培養新開發人員。
- 通用元件模型，因此自訂任何 Salesforce 應用程式的方式都相同。
他們也發現顧客不想要以下內容：
- 元件和應用程式的重大變更。換句話說，回溯相容性是必要條件。
- 無法擺脫舊技術，也無法演進。
- 受困於圍牆花園。
以網頁元件做為新 UI 平台的基礎，可滿足所有這些需求，因此我們推出了全新的 Lightning 網頁元件。
開始使用網頁元件
有很多很棒的方法可以開始使用網頁元件。
如果您要建構網頁應用程式，可以考慮使用許多可用的標準網頁元件。以下提供幾個例子謹供參考：
- Google 會以網頁元件的形式，提供自家 Material Design 系統：Material Web Components。
- Wired Elements 是一組很酷的網頁元件，具有手繪草圖的外觀。
- 您可以在任何應用程式中加入
<model-viewer>等專用網頁元件，新增 3D 內容。
如果您要為公司開發設計系統，或是販售可在任何環境中使用的單一元件或程式庫，建議使用網頁元件編寫元件。您可以使用內建的網頁元件 API，但這些 API 相當低階，因此有許多程式庫可供使用，讓這個程序更加輕鬆。
如要開始建構自己的元件，可以查看 LitElement。這是 Google 開發的網頁元件基礎類別，具有類似 React 的絕佳功能性算繪體驗。
其他可考慮的工具和程式庫：
- Stencil 是以網頁元件為優先的架構。包括 JSX 和 TypeScript 等多項熱門架構功能
- Angular Elements 可讓您將 Angular 元件包裝為網頁元件。
- Vue.js 網頁元件包裝函式可將 Vue 元件封裝為網頁元件。
更多資源：
- open-wc.org 網站提供實用的入門資訊，以及建構和開發工具的提示和預設設定。
- 網站基礎知識提供基本網頁元件 API 的入門知識，以及設計網頁元件的最佳做法。
- MDN 提供網頁元件 API 的參考文件，以及一些教學課程。