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

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

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

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

這既對(duì)也錯(cuò)。但首先，讓我們了解一下抽象層三角形。

抽象層三角形

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

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

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

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

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

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

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

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

私有環(huán)境

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

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

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

此示例和后續(xù)示例僅用于演示目的，并非旨在用于生產(chǎn)環(huán)境，因?yàn)樗鼈儧](méi)有考慮關(guān)鍵情況，例如可訪問(wèn)性和其他優(yōu)化。

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

標(biāo)準(zhǔn)環(huán)境

標(biāo)準(zhǔn)環(huán)境可能是最復(fù)雜的組件類(lèi)型，不僅因?yàn)榄h(huán)境范圍可以從成熟的框架（如 Vue 和 React）到普通的原生 HTML，而且因?yàn)槊總€(gè)人都應(yīng)該能夠像使用任何其他元素一樣使用該組件。

例如，當(dāng)公開(kāi)添加組件（例如添加到 npm）時(shí)，使用它的人會(huì)期望能夠?qū)ζ溥M(jìn)行自定義，至少在某種程度上。

您知道任何帶有其自身演示樣式的 HTML 元素嗎？答案應(yīng)該是“否”，因?yàn)樵乇仨毷褂?CSS 明確設(shè)置樣式。對(duì)于在標(biāo)準(zhǔn)環(huán)境中制作的 Web 組件也是如此。單個(gè) Web 組件應(yīng)該可以通過(guò)添加類(lèi)和屬性或其他方法進(jìn)行自定義。

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

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

Web 組件和組合

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

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

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

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

Web 組件和可訪問(wèn)性

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

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

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

結(jié)論

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

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