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

準備工作

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

React

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

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

服務器端渲染 (SSR)

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

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

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

開始

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

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

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

Shoelace介紹

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

安裝Shoelace后，讓我們創(chuàng)建一個Svelte組件來渲染一些內容，然后逐步完成完全自定義它的步驟。為了選擇一些比較復雜的內容，我使用了標簽和對話框（通常稱為模態(tà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網(wǎng)站上已經(jīng)詳細記錄的每個API。相反，讓我們研究一下如何最好地交互和完全自定義這些Web Components。

與API交互：方法和事件

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

標簽

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

let tabs;

……并綁定它：

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

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

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

事件也是同樣的道理。當顯示新標簽時，會觸發(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>

這可以工作，并在顯示不同的標簽時記錄事件對象。

通常我們渲染標簽并讓用戶在它們之間點擊，因此這項工作通常甚至不需要，但如果您需要它，它就在那里。現(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屬性并綁定到隱藏事件，以便當用戶點擊對話框內容外部將其關閉時，我們可以重置它。讓我們添加一個點擊處理程序到該關閉按鈕，以將我們的open屬性設置為false，這也會關閉對話框。

let tabs;

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

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

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

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

自定義所有樣式！

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

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

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

快速瀏覽Shadow DOM

在您的DevTools中查看其中一個標簽標題；它應該如下所示：

我們的標簽元素創(chuàng)建了一個帶有.tab和.tab--active類的div容器和一個tabindex，同時還顯示了我們?yōu)樵摌撕炤斎氲奈谋尽５堊⒁?，它位?em>shadow root內。這允許Web組件作者向Web組件添加自己的標記，同時還提供一個放置我們提供的內容的地方。注意<slot></slot>元素？這基本上意味著“將用戶在Web組件標簽之間渲染的任何內容放在這里”。

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

封裝樣式

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

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

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

::part選擇器

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

覆蓋Shoelace樣式

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

通過shadow root繼承樣式

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

覆蓋Shoelace CSS變量

<sl-tab-group></sl-tab-group>組件讀取一個--indicator-color CSS自定義屬性，用于活動標簽的下劃線。我們可以使用一些基本的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）中，任何非禁用的標簽都有一個指針光標。讓我們將其更改為活動（已選擇）標簽的默認光標。我們已經(jīng)看到<sl-tab></sl-tab>元素在標簽標題的容器上添加了一個part="base"屬性。此外，當前選擇的標簽會接收一個active屬性。讓我們使用這些事實來定位活動標簽并更改光標：

let tabs;

就是這樣！

自定義動畫

為了錦上添花，讓我們看看Shoelace如何允許我們自定義動畫。Shoelace使用Web Animations API，并公開一個setDefaultAnimation API來控制不同的元素如何為其各種交互設置動畫。請參閱文檔了解詳細信息，但例如，以下是如何將Shoelace的默認對話框動畫從向外擴展和向內收縮更改為從頂部動畫進入，并在隱藏時向下移動。

<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文件中。注釋掉它以查看原始的默認動畫。

總結

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

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