本文介紹Shoelace，一個(gè)由Cory LaViska創(chuàng)建的組件庫(kù)，但它與眾不同。它定義了所有標(biāo)準(zhǔn)的UX組件：標(biāo)籤、模態(tài)框、手風(fēng)琴、自動(dòng)完成等等。這些組件開(kāi)箱即用，美觀、易用且完全可定制。但它並非使用React、Solid或Svelte等框架創(chuàng)建這些組件，而是使用Web Components；這意味著您可以將它們與任何框架一起使用。

準(zhǔn)備工作

Web Components很棒，但目前還有一些小問(wèn)題需要注意。

React

我之前說(shuō)過(guò)它們可以在任何JavaScript框架中使用，但我之前也寫過(guò)，React對(duì)Web Components的支持目前很差。為了解決這個(gè)問(wèn)題，Shoelace專門為React創(chuàng)建了包裝器。

另一個(gè)我個(gè)人比較喜歡的選擇是，創(chuàng)建一個(gè)輕量級(jí)的React組件，它接受Web組件的標(biāo)籤名稱及其所有屬性，然後處理React的不足之處。我之前的一篇文章中討論過(guò)這個(gè)選項(xiàng)。我喜歡這個(gè)方案，因?yàn)樗荚诒粍h除。 React的實(shí)驗(yàn)分支目前已經(jīng)解決了Web組件互操作性問(wèn)題，因此一旦發(fā)布，任何使用的輕量級(jí)Web組件互操作組件都可以被搜索和刪除，留下直接的Web組件用法，而無(wú)需任何React包裝器。

服務(wù)器端渲染 (SSR)

在撰寫本文時(shí)，對(duì)SSR的支持也很差。理論上，有一種叫做聲明式Shadow DOM (DSD) 的技術(shù)可以實(shí)現(xiàn)SSR。但是瀏覽器支持有限，而且DSD實(shí)際上需要服務(wù)器支持才能正常工作，這意味著Next、Remix或您在服務(wù)器上使用的任何其他工具都需要具備一些特殊處理能力。

也就是說(shuō)，還有其他方法可以讓W(xué)eb Components與使用Next等工具進(jìn)行SSR的Web應(yīng)用程序“正常工作”。簡(jiǎn)而言之，註冊(cè)Web Components的腳本需要在解析標(biāo)記之前運(yùn)行在一個(gè)阻塞腳本中。但這將是另一篇文章的主題。

當(dāng)然，如果您正在構(gòu)建任何類型的客戶端渲染SPA，則這不是問(wèn)題。這就是我們?cè)谶@篇文章中將要使用的。

開(kāi)始

由於我希望這篇文章重點(diǎn)關(guān)注Shoelace及其Web組件特性，因此我將對(duì)所有內(nèi)容使用Svelte。我還將使用這個(gè)Stackblitz項(xiàng)目進(jìn)行演示。我們將一起逐步構(gòu)建這個(gè)演示，但隨時(shí)都可以打開(kāi)REPL查看最終結(jié)果。

我將向您展示如何使用Shoelace，更重要的是，如何自定義它。我們將討論Shadow DOM以及它們阻止哪些外部樣式（以及哪些樣式不被阻止）。我們還將討論::part CSS選擇器——這可能對(duì)您來(lái)說(shuō)是全新的——我們甚至?xí)吹絊hoelace如何允許我們覆蓋和自定義其各種動(dòng)畫(huà)。

如果您在閱讀本文後發(fā)現(xiàn)自己喜歡Shoelace，並想在React項(xiàng)目中嘗試它，我的建議是使用我介紹中提到的包裝器。這將允許您使用Shoelace的任何組件，並且一旦React發(fā)布他們已經(jīng)擁有的Web組件修復(fù)程序（在19版中查找），就可以完全刪除它。

Shoelace介紹

Shoelace有相當(dāng)詳細(xì)的安裝說(shuō)明。最簡(jiǎn)單的方法是將<script></script>和<link>標(biāo)籤添加到您的HTML文檔中，就是這樣。但是，對(duì)於任何生產(chǎn)應(yīng)用程序，您可能只想選擇性地導(dǎo)入所需的內(nèi)容，並且也有相應(yīng)的說(shuō)明。

安裝Shoelace後，讓我們創(chuàng)建一個(gè)Svelte組件來(lái)渲染一些內(nèi)容，然後逐步完成完全自定義它的步驟。為了選擇一些比較複雜的內(nèi)容，我使用了標(biāo)籤和對(duì)話框（通常稱為模態(tài)框）組件。以下是一些主要來(lái)自文檔的標(biāo)記：

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

這將呈現(xiàn)一些漂亮且有樣式的標(biāo)籤。活動(dòng)標(biāo)籤的下劃線甚至?xí)芎玫剡M(jìn)行動(dòng)畫(huà)處理，並從一個(gè)活動(dòng)標(biāo)籤滑動(dòng)到下一個(gè)活動(dòng)標(biāo)籤。

我不會(huì)浪費(fèi)您的時(shí)間來(lái)詳細(xì)介紹Shoelace網(wǎng)站上已經(jīng)詳細(xì)記錄的每個(gè)API。相反，讓我們研究一下如何最好地交互和完全自定義這些Web Components。

與API交互：方法和事件

調(diào)用Web組件上的方法和訂閱事件可能與您習(xí)慣使用的普通框架略有不同，但這並不太複雜。讓我們看看如何操作。

標(biāo)籤

標(biāo)籤組件（<sl-tab-group></sl-tab-group>）有一個(gè)show方法，該方法手動(dòng)顯示特定標(biāo)籤。為了調(diào)用它，我們需要訪問(wèn)標(biāo)籤的基礎(chǔ)DOM元素。在Svelte中，這意味著使用bind:this。在React中，它將是一個(gè)ref。等等。由於我們使用的是Svelte，讓我們聲明一個(gè)標(biāo)籤實(shí)例變量：

let tabs;

……並綁定它：

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

現(xiàn)在我們可以添加一個(gè)按鈕來(lái)調(diào)用它：

<button on:click="{()"> tabs.show("custom")}>Show custom</button>

事件也是同樣的道理。當(dāng)顯示新標(biāo)籤時(shí)，會(huì)觸發(fā)一個(gè)sl-tab-show事件。我們可以對(duì)我們的tabs變量使用addEventListener，或者可以使用Svelte的on:event-name快捷方式。

<sl-tab-group bind:this="{tabs}" on:sl-tab-show="{e"> console.log(e)}></sl-tab-group>

這可以工作，並在顯示不同的標(biāo)籤時(shí)記錄事件對(duì)象。

通常我們渲染標(biāo)籤並讓用戶在它們之間點(diǎn)擊，因此這項(xiàng)工作通常甚至不需要，但如果您需要它，它就在那裡。現(xiàn)在讓我們使對(duì)話框組件具有交互性。

對(duì)話框

對(duì)話框組件（<sl-dialog></sl-dialog>）接受一個(gè)open屬性，該屬性控制對(duì)話框是否……打開(kāi)。讓我們?cè)谖覀兊腟velte組件中聲明它：

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

它還有一個(gè)sl-hide事件，用於隱藏對(duì)話框。讓我們傳遞我們的open屬性並綁定到隱藏事件，以便當(dāng)用戶點(diǎn)擊對(duì)話框內(nèi)容外部將其關(guān)閉時(shí)，我們可以重置它。讓我們添加一個(gè)點(diǎn)擊處理程序到該關(guān)閉按鈕，以將我們的open屬性設(shè)置為false，這也會(huì)關(guān)閉對(duì)話框。

let tabs;

最後，讓我們連接我們的打開(kāi)對(duì)話框按鈕：

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

就是這樣。與組件庫(kù)的API交互或多或少是直接的。如果這篇文章只做了這些，那就相當(dāng)無(wú)聊了。

但是Shoelace——使用Web Components構(gòu)建——意味著某些東西，特別是樣式，的工作方式會(huì)與我們習(xí)慣使用的略有不同。

自定義所有樣式！

在撰寫本文時(shí)，Shoelace仍處?kù)稖y(cè)試階段，創(chuàng)建者正在考慮更改一些默認(rèn)樣式，甚至可能完全刪除一些默認(rèn)樣式，這樣它們就不會(huì)再覆蓋主機(jī)應(yīng)用程序的樣式了。我們將介紹的概念無(wú)論如何都是相關(guān)的，但如果您使用它時(shí)，一些我提到的Shoelace細(xì)節(jié)有所不同，也不要感到驚訝。

Shoelace的默認(rèn)樣式雖然很好，但我們的Web應(yīng)用程序可能也有自己的設(shè)計(jì)，並且希望我們的UX組件與之匹配。讓我們看看如何在Web Components的世界中做到這一點(diǎn)。

我們不會(huì)試圖實(shí)際改進(jìn)任何東西。 Shoelace的創(chuàng)建者比我更擅長(zhǎng)設(shè)計(jì)。相反，我們只看看如何更改東西，這樣您就可以適應(yīng)自己的Web應(yīng)用程序。

快速瀏覽Shadow DOM

在您的DevTools中查看其中一個(gè)標(biāo)籤標(biāo)題；它應(yīng)該如下所示：

我們的標(biāo)籤元素創(chuàng)建了一個(gè)帶有.tab和.tab--active類的div容器和一個(gè)tabindex，同時(shí)還顯示了我們?yōu)樵摌?biāo)籤輸入的文本。但請(qǐng)注意，它位於shadow root內(nèi)。這允許Web組件作者向Web組件添加自己的標(biāo)記，同時(shí)還提供一個(gè)放置我們提供的內(nèi)容的地方。注意<slot></slot>元素？這基本上意味著“將用戶在Web組件標(biāo)籤之間渲染的任何內(nèi)容放在這裡”。

因此<sl-tab></sl-tab>組件創(chuàng)建一個(gè)shadow root，向其中添加一些內(nèi)容以渲染漂亮樣式的標(biāo)籤標(biāo)題以及一個(gè)佔(zhàn)位符（<slot></slot>），該佔(zhàn)位符在其中渲染我們的內(nèi)容。

封裝樣式

Web開(kāi)發(fā)中一個(gè)經(jīng)典且更令人沮喪的問(wèn)題一直是樣式級(jí)聯(lián)到我們不希望它們出現(xiàn)的地方。您可能擔(dān)心應(yīng)用程序中任何指定類似div.tab內(nèi)容的樣式規(guī)則都會(huì)干擾這些標(biāo)籤。事實(shí)證明這不是問(wèn)題；shadow roots封裝了樣式。 shadow root外部的樣式不會(huì)影響shadow root內(nèi)部的內(nèi)容（有一些例外，我們稍後會(huì)討論），反之亦然。

對(duì)此的例外是可繼承的樣式。當(dāng)然，您不需要為Web應(yīng)用程序中的每個(gè)元素應(yīng)用font-family樣式。相反，您可以在:root或html上一次指定您的font-family，並讓它在它下面的所有地方繼承。這種繼承實(shí)際上也會(huì)穿透shadow root。

CSS自定義屬性（通常稱為“css變量”）是一個(gè)相關(guān)的例外。 shadow root絕對(duì)可以讀取在shadow root外部定義的CSS屬性；這將在稍後變得相關(guān)。

::part選擇器

那麼不可繼承的樣式呢？如果我們想自定義shadow root內(nèi)部某些內(nèi)容（例如不繼承的cursor），我們運(yùn)氣不好嗎？事實(shí)證明我們沒(méi)有。再次查看上面的標(biāo)籤元素圖像及其shadow root。注意div上的part屬性？這允許您使用::part選擇器從shadow root外部定位和設(shè)置該元素的樣式。我們將逐步介紹一個(gè)示例。

覆蓋Shoelace樣式

讓我們看看這些方法的實(shí)際應(yīng)用。截至目前，許多Shoelace樣式（包括字體）從CSS自定義屬性接收默認(rèn)值。要使這些字體與應(yīng)用程序的樣式對(duì)齊，請(qǐng)覆蓋相關(guān)的自定義屬性。請(qǐng)參閱文檔以了解Shoelace正在使用哪些CSS變量，或者您可以簡(jiǎn)單地在DevTools中檢查任何給定元素中的樣式。

通過(guò)shadow root繼承樣式

打開(kāi)StackBlitz項(xiàng)目src目錄中的app.css文件。在底部的:root部分，您應(yīng)該看到一個(gè)letter-spacing: normal;聲明。由於letter-spacing屬性是可繼承的，請(qǐng)嘗試設(shè)置一個(gè)新值，例如2px。保存後，所有內(nèi)容（包括在shadow root中定義的標(biāo)籤標(biāo)題）都將相應(yīng)調(diào)整。

覆蓋Shoelace CSS變量

<sl-tab-group></sl-tab-group>組件讀取一個(gè)--indicator-color CSS自定義屬性，用於活動(dòng)標(biāo)籤的下劃線。我們可以使用一些基本的CSS來(lái)覆蓋它：

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

就是這樣，我們現(xiàn)在有了綠色的指示器！

查詢部件

在我目前使用的Shoelace版本（2.0.0-beta.83）中，任何非禁用的標(biāo)籤都有一個(gè)指針光標(biāo)。讓我們將其更改為活動(dòng)（已選擇）標(biāo)籤的默認(rèn)光標(biāo)。我們已經(jīng)看到<sl-tab></sl-tab>元素在標(biāo)籤標(biāo)題的容器上添加了一個(gè)part="base"屬性。此外，當(dāng)前選擇的標(biāo)籤會(huì)接收一個(gè)active屬性。讓我們使用這些事實(shí)來(lái)定位活動(dòng)標(biāo)籤並更改光標(biāo)：

let tabs;

就是這樣！

自定義動(dòng)畫(huà)

為了錦上添花，讓我們看看Shoelace如何允許我們自定義動(dòng)畫(huà)。 Shoelace使用Web Animations API，並公開(kāi)一個(gè)setDefaultAnimation API來(lái)控制不同的元素如何為其各種交互設(shè)置動(dòng)畫(huà)。請(qǐng)參閱文檔了解詳細(xì)信息，但例如，以下是如何將Shoelace的默認(rèn)對(duì)話框動(dòng)畫(huà)從向外擴(kuò)展和向內(nèi)收縮更改為從頂部動(dòng)畫(huà)進(jìn)入，並在隱藏時(shí)向下移動(dòng)。

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

該代碼位於App.svelte文件中。註釋掉它以查看原始的默認(rèn)動(dòng)畫(huà)。

總結(jié)

Shoelace是一個(gè)非常雄心勃勃的組件庫(kù)，它使用Web Components構(gòu)建。由於Web Components與框架無(wú)關(guān)，因此它們可以與任何框架一起用於任何項(xiàng)目。隨著新的框架開(kāi)始展現(xiàn)出驚人的性能特性以及易用性，能夠使用不受任何一個(gè)框架約束的優(yōu)質(zhì)用戶體驗(yàn)組件比以往任何時(shí)候都更具吸引力。

以上是介紹鞋款，這是一個(gè)獨(dú)立於框架的基於組件的UX庫(kù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！