本文并非講解如何構(gòu)建 Web 組件，Caleb Williams 最近已撰寫了一份詳盡的指南。讓我們來討論如何使用它們，構(gòu)建時需要考慮哪些因素，以及如何在項目中有效利用它們。

如果您不熟悉 Web 組件，Caleb 的指南非常值得一讀，但以下是一些能幫助您快速上手的資源：

• Web 組件——“正確”的方法
• Shadow DOM v1：自包含的 Web 組件
• MDN 上的 Web 組件
• Awesome Web 組件
• 開放式 Web 組件推薦

由于 Web 組件現(xiàn)在得到了廣泛支持（這要感謝幕后許多人的辛勤工作）——并且考慮到 Edge 將很快切換到 Chromium 平臺——人們現(xiàn)在將 Web 組件視為構(gòu)建可重用 UI 組件的“原生”和平臺兼容的方式，以保持設(shè)計系統(tǒng)和 Web 項目之間的一致性，同時利用 Shadow DOM 的強大功能將樣式和邏輯封裝在組件本身中。

這既對也錯。但首先，讓我們了解一下抽象層三角形。

抽象層三角形

從技術(shù)上講，我們應(yīng)該將 Web 組件視為我們最喜歡的標記語言 HTML 的擴展（是的?。eb 組件 API 允許我們創(chuàng)建 HTML 中不存在的自定義 HTML 元素（例如 <foo-bar></foo-bar>）。

有人說 Web 組件基本上是新的 HTML 元素，因此我們應(yīng)該將它們視為 HTML 規(guī)范的一部分，因此我們應(yīng)該遵循其范例、核心概念和用法。如果我們假設(shè)所有這些要點，我們會發(fā)現(xiàn)我們的組件將存在于 Web 平臺堆棧的最低層，與 HTML、CSS 和 JavaScript 并列。框架和庫（如 React、Vue、Angular、SvelteJS）在其抽象層上工作，位于其他工具之上，這些工具處于某種“中土世界”，例如 StencilJs、Hybrids 和 Lit。在這些抽象層之下，我們可以找到我們的基本 Web 技術(shù)……以及原生 Web 組件。我們可以用ALT（Abstraction Layer Triangle）圖來表示這個概念：

為什么這很重要？它有助于我們可視化原生組件之上存在的各個層，并了解它們的使用環(huán)境，以便可以針對預(yù)期的環(huán)境構(gòu)建它們。什么是環(huán)境？這就是我們的目標。

相同的技術(shù)，不同的環(huán)境

Shadow DOM 是 Web 組件 API 中的關(guān)鍵因素。它允許我們將 JavaScript 和 CSS 捆綁到自定義元素中，以防止外部干擾和樣式操作，除非我們明確允許。開發(fā)人員確實可以遵循一些方法來允許外部 CSS 泄漏到 shadow root 和組件中，包括自定義屬性以及 ::part 和 ::theme 偽元素，Monica Dinculescu 對此進行了很好的介紹。

還需要考慮另一件事：我們正在使用的環(huán)境。在我個人構(gòu)建 Web 組件三年后，我可以確定兩種環(huán)境：私有環(huán)境（如設(shè)計系統(tǒng)）和標準環(huán)境（如沒有自定義樣式的普通 HTML、CSS 和 JavaScript）。

在設(shè)計組件之前，我們需要了解它們將如何使用，因此確定環(huán)境類型是所有這一切的關(guān)鍵。最簡單的方法是只針對一個環(huán)境，但通過一個小小的 CSS 技巧，我們可以為兩者構(gòu)建組件。

在我們深入了解之前，讓我們看看這兩種環(huán)境之間的區(qū)別。

私有環(huán)境

私有環(huán)境是一個封閉的生態(tài)系統(tǒng)，它為組件提供自己的樣式，必須按原樣使用。因此，如果我們正在構(gòu)建一個來自特定樣式指南或設(shè)計系統(tǒng)的組件庫，則每個組件都將反映自定義樣式，因此無需每次需要時都對其進行編碼。

JavaScript 邏輯也是如此。例如，我們可以附加一個封閉的 shadow root，以防止其他人意外地用 querySelector 刺穿 shadow boundary。因此，我們可以簡單地選擇和使用任何組件，避免樣式不一致和 CSS 沖突等問題。作為作者，您還可以定義一組 CSS 自定義屬性（或 ::parts），這些屬性可用于針對特定用例設(shè)置組件的樣式，但這并不是設(shè)計系統(tǒng)的重點。

這是一個在私有環(huán)境中使用 Web 組件的示例。它所有的樣式和邏輯都包含在其 shadow-root 中，可以簡單地添加到任何頁面中。

此示例和后續(xù)示例僅用于演示目的，并非旨在用于生產(chǎn)環(huán)境，因為它們沒有考慮關(guān)鍵情況，例如可訪問性和其他優(yōu)化。

私有環(huán)境中的組件很少在該環(huán)境之外使用。例如，如果我們嘗試從設(shè)計系統(tǒng)（具有其自身強制樣式）中獲取一個元素，我們無法簡單地將其添加到項目中并期望對其進行自定義。您知道 Bootstrap 如何根據(jù)您的喜好進行主題設(shè)置和自定義嗎？這與之完全相反。這些組件旨在在其環(huán)境中并且僅在其環(huán)境中運行。

標準環(huán)境

標準環(huán)境可能是最復(fù)雜的組件類型，不僅因為環(huán)境范圍可以從成熟的框架（如 Vue 和 React）到普通的原生 HTML，而且因為每個人都應(yīng)該能夠像使用任何其他元素一樣使用該組件。

例如，當公開添加組件（例如添加到 npm）時，使用它的人會期望能夠?qū)ζ溥M行自定義，至少在某種程度上。

您知道任何帶有其自身演示樣式的 HTML 元素嗎？答案應(yīng)該是“否”，因為元素必須使用 CSS 明確設(shè)置樣式。對于在標準環(huán)境中制作的 Web 組件也是如此。單個 Web 組件應(yīng)該可以通過添加類和屬性或其他方法進行自定義。

這是我們在封閉環(huán)境示例中看到的相同 <todo-list></todo-list> 元素，但它是為標準環(huán)境設(shè)計的。它可以按原樣工作，其 shadow root 中沒有任何演示樣式。事實上，它只包含必要的邏輯和基本 CSS 以確保其功能。否則，它完全可以像任何標準 HTML 元素（如 div）一樣進行自定義。

我們?yōu)槊總€環(huán)境查看的兩個示例都是使用相同的組件制作的。不同之處在于，標準環(huán)境中的組件可以使用外部 CSS 進行自定義和選擇。

Web 組件和組合

好的，因此使用 Web 組件與使用普通 HTML 實際上是一樣的，盡管正如我們所看到的，遵循給定內(nèi)容的范例和原則非常重要。我們需要注意的是 Web 組件的組合。

正如 Google Web Fundamentals 所解釋的那樣：

組合是 Shadow DOM 最不為人知的功能之一，但可以說是最重要的功能。

在我們的 Web 開發(fā)世界中，組合是我們?nèi)绾问褂?HTML 聲明式地構(gòu)建應(yīng)用程序的方式。不同的構(gòu)建塊（<div>、<code><s></s>、<em></em>、<strong></strong>）組合在一起形成應(yīng)用程序。其中一些標簽甚至可以相互配合使用。組合就是為什么像 <select></select>、<details></details>、<summary></summary> 和 <video></video> 這樣的原生元素如此靈活的原因。每個標簽都接受某些 HTML 作為子元素，并對它們執(zhí)行一些特殊操作。例如，<select></select> 知道如何將 <option></option> 和 <optgroup></optgroup> 呈現(xiàn)為下拉列表和多選小部件。<details></details> 元素將 <summary></summary> 呈現(xiàn)為可展開的箭頭。甚至 <video></video> 也知道如何處理某些子元素：<track></track> 元素不會被渲染，但它們確實會影響視頻的行為。多么神奇！組合是我們使用 HTML 時通常所做的工作。由于 Web 組件僅僅是具有 DOM 引用（而不是邏輯容器）的 HTML 元素，因此我們應(yīng)該依靠組合來構(gòu)建我們的組件和任何子組件。如果您考慮 <ul></ul> 和 <select></select>，您會注意到您聲明式地組合這些元素以獲得最終輸出，并且您有特定屬性可用于主組件（例如 [readonly]）或子組件（例如 [selected]）。對于 Web 組件也是如此，如果您正在構(gòu)建自定義列表，請考慮構(gòu)建主組件（<custom-list></custom-list>）和子組件（<custom-li></custom-li>）。使用 <slot></slot> 元素，您可以定義子元素將在何處放置，以及在沒有傳遞子元素時將顯示的占位符內(nèi)容。

Web 組件和可訪問性

另一件需要考慮的事情是我們稱之為可訪問性的“小”主題。由于我們正在創(chuàng)建全新的 HTML 元素，因此我們需要考慮元素的可訪問性，以便提供基本語義角色、任何鍵盤導(dǎo)航以及用戶的操作系統(tǒng)首選項，例如減少運動和高對比度設(shè)置。

我強烈建議以下資源作為構(gòu)建可訪問和包容性組件的參考，如何定義語義標記以及如何實現(xiàn)基本的鍵盤導(dǎo)航。

• 包容性組件
• web.dev 上的“對所有人都有效”
• WAI-ARIA 創(chuàng)作實踐
• WebAIM WCAG 清單

結(jié)論

Web 組件是 Web 開發(fā)中的一項新興技術(shù)，因此，就根據(jù)其預(yù)期用途或最大化用途構(gòu)建它們而言，并沒有任何明確定義的最佳實踐來指導(dǎo)我們。當您發(fā)現(xiàn)自己正在使用它們時，您可能可以從這篇文章中獲得的唯一一點是考慮它們是用于封閉環(huán)境還是標準環(huán)境，然后問問自己WHI：

• Who 將使用此組件？
• How much flexibility 這個人應(yīng)該擁有來對其進行自定義？
• Is 此組件適用于所有人還是特定受眾？