近期涌現(xiàn)了不少關(guān)于Web Components的新聞，我將它們整理在此。

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

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

另一個好處是，組件可以使用（并且確實使用了）Shadow DOM。這提供了一種直接來自Web平臺的隔離機(jī)制。對于我們這些CSS開發(fā)者來說，這意味著標(biāo)簽組件中標(biāo)簽的樣式是使用.tab類完成的（哇，太酷了?。谠摻M件中是隔離的。即使使用這么通用的名稱，我也不會意外地影響頁面上使用該通用類的其他組件，也不會有一些外部CSS來干擾這里的內(nèi)部結(jié)構(gòu)。Shadow DOM就像一道安全墻，防止樣式泄漏或滲入。

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

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

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

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

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

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

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

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

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

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