Web組件庫上的一點

近期湧現了不少關於Web Components的新聞，我將它們整理在此。

我認為Web Components最棒的應用場景之一是模式庫。與其像Bootstrap那樣使用<div>，或像Bulma那樣使用<code><div>，不如使用自定義元素，例如<code><designsystem-tabs></designsystem-tabs>。新的Shoelace庫使用sl命名空間來定義其組件。它是一個完全基於Web Components的模式庫，其中的標籤是<sl-tab-group></sl-tab-group>元素。

這樣做有什麼好處呢？首先，它引入了組件模型。這意味著，如果您正在處理一個組件，它將擁有一個模板和一個與其位置相關的樣式表。查看Shoelace的內部實現，您可以看到這一切都基於Stencil。

另一個好處是，組件可以使用（並且確實使用了）Shadow DOM。這提供了一種直接來自Web平台的隔離機制。對於我們這些CSS開發者來說，這意味著標籤組件中標籤的樣式是使用.tab類完成的（哇，太酷了！），但它在該組件中是隔離的。即使使用這麼通用的名稱，我也不會意外地影響頁面上使用該通用類的其他組件，也不會有一些外部CSS來干擾這裡的內部結構。 Shadow DOM就像一道安全牆，防止樣式洩漏或滲入。

我還看到了FAST框架¹，它也是一組組件。它的標籤被定義為<fast-tabs></fast-tabs>。這讓我想到Web Components作為模式庫方法的另一個優點：它感覺像是API驅動的，甚至從組件本身的名稱開始，這實際上就是你在HTML中使用的。該元素上的屬性可以完全自定義。新興的標準似乎是，您甚至不必為自定義的屬性添加data-前綴。因此，如果我要製作一個標籤組件，它可能是<chris-tabs active-tab="lunch" variation="rounded"></chris-tabs>。

也許使用Web Components作為模式庫的最大參與者是Ionic。它們的標籤是<ion-tabs></ion-tabs>，您可以使用它們而無需涉及任何其他框架（儘管它們除了自己的Stencil之外，還支持Angular、React和Vue）。 Ionic在Web Components方面取得了很大的進步，最近支持了Shadow Parts。以下是Brandy Carney再次解釋封裝的說明：

Shadow DOM有助於防止樣式從組件中洩漏並意外應用於其他元素。例如，我們將.buttonclass分配給我們的<ion-button></ion-button>組件。如果Ionic Framework用戶在其自己的元素之一上設置.button類，則在框架的早期版本中，它將繼承Ionic按鈕樣式。由於<ion-button></ion-button>現在是一個Shadow Web Component，所以這個問題不再存在。

但是，由於這種封裝，樣式也無法滲透到Shadow組件的內部元素中。這意味著，如果Shadow組件在其shadow tree中呈現元素，用戶就無法使用他們的CSS來定位內部元素。

封裝是一件好事，但它確實使樣式變得“更難”（故意如此）。有一個重要的CSS概念需要了解： CSS自定義屬性可以穿透Shadow DOM 。但是，人們決定——我認為這是正確的——在一個設計系統中將每一件事都“變量化”並不是一個明智的做法。相反，他們為Shadow DOM內的每個HTML片段賦予一個部分，例如<div part="icon">，這使我們能夠使用CSS“從外部訪問”，例如<code>custom-component::part(icon) { } 。我認為基於部分的樣式鉤子大部分是不錯的，並且對於這樣的模式庫來說是一種明智的方案，但我承認它的一部分讓我感到困擾。選擇器的工作方式與您預期的不一樣。例如，您無法有條件地選擇內容。您也不能選擇子元素或使用級聯。換句話說，它只是一個一次性的，或者就像您用手直接穿過薄膜一樣。您可以向前伸出手抓住東西或不抓住，但您什麼也做不了。

說到讓人生氣的事情，Andrea Giammarchi對Web Components的現狀有一個很好的觀點：

每個開始使用的庫，包括我的庫，都建議我們應該導入該庫來定義所謂的“可移植的自定義元素”。

Google總是建議使用LitElement。 Microsoft希望您使用FASTElement。 Stencil有自己的組件。 hyperHTML有自己的組件。沒有人只使用“原始”的Web Components。這很奇怪！我認為最糟糕的部分是，Web Components應該是一個“原生平台”的東西，這意味著我們不應該需要依賴某種特定技術才能使用它們。當我們這樣做時，我們就像使用React或其他任何東西一樣被鎖定到它上面。

Andrea在文章中提出了一些想法，包括使用一些新的更小的庫。我認為我想看到的是一個根本不使用任何庫的模式庫。

1. FAST在首頁的連續句子中將自己稱為“界面系統”，然後是“UI框架”。 Shoelaces稱自己為“庫”，但我稱之為“模式庫”。我認為“設計系統”是描述這個概念最常用的術語，但通常比特定技術更廣泛。 FAST在代碼本身中使用該術語來表示控制主題的包裝器元素。我認為圍繞所有這些東西的術語遠未確定。