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

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

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

另一個(gè)好處是，組件可以使用（並且確實(shí)使用了）Shadow DOM。這提供了一種直接來(lái)自Web平臺(tái)的隔離機(jī)制。對(duì)於我們這些CSS開(kāi)發(fā)者來(lái)說(shuō)，這意味著標(biāo)籤組件中標(biāo)籤的樣式是使用.tab類(lèi)完成的（哇，太酷了！），但它在該組件中是隔離的。即使使用這麼通用的名稱(chēng)，我也不會(huì)意外地影響頁(yè)面上使用該通用類(lèi)的其他組件，也不會(huì)有一些外部CSS來(lái)干擾這裡的內(nèi)部結(jié)構(gòu)。 Shadow DOM就像一道安全牆，防止樣式?jīng)┗驖B入。

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

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

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

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

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

說(shuō)到讓人生氣的事情，Andrea Giammarchi對(duì)Web Components的現(xiàn)狀有一個(gè)很好的觀點(diǎn)：

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

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

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

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