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

準(zhǔn)備工作

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

React

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

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

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

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

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

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

開始

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

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

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

Shoelace介紹

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

安裝Shoelace后，讓我們創(chuàng)建一個Svelte組件來渲染一些內(nèi)容，然后逐步完成完全自定義它的步驟。為了選擇一些比較復(fù)雜的內(nèi)容，我使用了標(biāo)簽和對話框（通常稱為模態(tà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)簽?；顒訕?biāo)簽的下劃線甚至?xí)芎玫剡M行動畫處理，并從一個活動標(biāo)簽滑動到下一個活動標(biāo)簽。

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

與API交互：方法和事件

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

標(biāo)簽

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

let tabs;

……并綁定它：

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

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

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

事件也是同樣的道理。當(dāng)顯示新標(biāo)簽時，會觸發(fā)一個sl-tab-show事件。我們可以對我們的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)簽時記錄事件對象。

通常我們渲染標(biāo)簽并讓用戶在它們之間點擊，因此這項工作通常甚至不需要，但如果您需要它，它就在那里?，F(xiàn)在讓我們使對話框組件具有交互性。

對話框

對話框組件（<sl-dialog></sl-dialog>）接受一個open屬性，該屬性控制對話框是否……打開。讓我們在我們的Svelte組件中聲明它：

<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>

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

let tabs;

最后，讓我們連接我們的打開對話框按鈕：

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

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

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

自定義所有樣式！

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

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

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

快速瀏覽Shadow DOM

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

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

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

封裝樣式

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

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

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

::part選擇器

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

覆蓋Shoelace樣式

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

通過shadow root繼承樣式

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

覆蓋Shoelace CSS變量

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

<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)簽都有一個指針光標(biāo)。讓我們將其更改為活動（已選擇）標(biāo)簽的默認(rèn)光標(biāo)。我們已經(jīng)看到<sl-tab></sl-tab>元素在標(biāo)簽標(biāo)題的容器上添加了一個part="base"屬性。此外，當(dāng)前選擇的標(biāo)簽會接收一個active屬性。讓我們使用這些事實來定位活動標(biāo)簽并更改光標(biāo)：

let tabs;

就是這樣！

自定義動畫

為了錦上添花，讓我們看看Shoelace如何允許我們自定義動畫。Shoelace使用Web Animations API，并公開一個setDefaultAnimation API來控制不同的元素如何為其各種交互設(shè)置動畫。請參閱文檔了解詳細(xì)信息，但例如，以下是如何將Shoelace的默認(rèn)對話框動畫從向外擴展和向內(nè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>

該代碼位于App.svelte文件中。注釋掉它以查看原始的默認(rèn)動畫。

總結(jié)

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

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