についての投稿です 靴紐、コンポーネント ライブラリ コリー・ラビスカ、しかしひねりを加えて。 タブ、モーダル、アコーディオン、オートコンプリート、および はるかに. 箱から出してすぐに美しく、アクセス可能で、完全にカスタマイズ可能です。 ただし、React、Solid、Svelte などでこれらのコンポーネントを作成するのではなく、 Webコンポーネント; これは、それらを一緒に使用できることを意味します どれか フレームワーク。
いくつかの予備的なこと
Web コンポーネントは優れていますが、現時点では注意すべき小さな問題がいくつかあります。
反応する
どの JavaScript フレームワークでも動作すると言いましたが、以前にも書いたように、Web Components に対する React のサポートは 現在貧しい. これに対処するために、Shoelace は実際に 作成されたラッパー Reactのためだけに。
私が個人的に気に入っているもう XNUMX つのオプションは、Web コンポーネントのタグ名とそのすべての属性とプロパティを受け入れる薄い React コンポーネントを作成し、React の欠点を処理する汚い作業を行うことです。 私はこのオプションについて話しました 前の投稿. 削除するように設計されているため、このソリューションが気に入っています。 Web コンポーネントの相互運用性の問題は現在、React の実験的ブランチで修正されているため、出荷されると、使用している薄い Web コンポーネントと相互運用可能なコンポーネントを検索して削除することができ、React ラッパーなしで直接 Web コンポーネントを使用できるようになります。
サーバー側レンダリング（SSR）
この記事の執筆時点では、SSR のサポートも貧弱です。 理論的には、と呼ばれるものがあります 宣言型 Shadow DOM （DSD）SSRを有効にします。 ただし、ブラウザのサポートは最小限であり、いずれにせよ、DSD は実際に必要です サーバーサポート 正しく機能すること、つまり Next, リミックスします、またはサーバーでたまたま使用するものはすべて、特別な処理が可能になる必要があります。
とはいえ、Web コンポーネントを取得する方法は他にもあります。 ただ仕事
Next のようなもので SSR された Web アプリを使用します。 簡単に説明すると、Web コンポーネントを登録するスクリプトは、マークアップが解析される前にブロッキング スクリプトで実行する必要があります。 しかし、それは別の投稿のトピックです。
もちろん、何らかの種類のクライアント レンダリング SPA を構築している場合、これは問題ではありません。 これが、この投稿で扱うものです。
はじめましょう
この投稿では Shoelace とその Web コンポーネントの性質に焦点を当てたいので、 スヴェルテ 全てにおいて。 これも使う予定 Stackblitz プロジェクト デモンストレーション用。 このデモを段階的に一緒に構築しますが、最終結果を確認するためにいつでもその REPL を開いてください。
Shoelace の使用方法と、さらに重要なカスタマイズ方法を紹介します。 についてお話しします Shadow DOM そして、どのスタイルが外の世界からブロックされているか (およびブロックされていないスタイル)。 についてもお話しします ::part CSS セレクターはまったく新しいものかもしれませんが、Shoelace でさまざまなアニメーションをオーバーライドしてカスタマイズする方法についても説明します。
この投稿を読んで Shoelace が好きで、React プロジェクトで試してみたいと思った場合、私のアドバイスは使用することです。 ラッパー 紹介で述べたように。 これにより、Shoelace の任意のコンポーネントを使用できるようになり、React が既に持っている Web コンポーネントの修正を出荷したら、完全に削除できます (バージョン 19 を探してください)。
シューレースのご紹介
靴ひもはかなり詳細です インストール手順. 最も簡単な方法で、ダンプできます & タグを HTML ドキュメントに追加するだけです。 ただし、どの製品アプリでも、必要なものだけを選択的にインポートする必要があり、そのための手順もあります。
Shoelace をインストールしたら、いくつかのコンテンツをレンダリングする Svelte コンポーネントを作成し、手順に従って完全にカスタマイズしましょう。 かなり重要なものを選択するために、タブとダイアログ (一般にモーダルと呼ばれる) コンポーネントを使用しました。 ここにいくつかのマークアップがあります 主にドキュメントから引用:
General
Custom
Advanced
Disabled
This is the general tab panel.
This is the custom tab panel.
This is the advanced tab panel.
This is a disabled tab panel.
Hello World!
これにより、素敵なスタイルのタブが表示されます。 アクティブなタブの下線もうまくアニメーション化され、あるアクティブなタブから次のアクティブなタブにスライドします.
Shoelace Web サイトで既に十分に文書化されている API の隅々まで実行するのに時間を無駄にすることはありません。 代わりに、これらの Web コンポーネントと対話し、完全にカスタマイズするための最善の方法を検討しましょう。
API との対話: メソッドとイベント
Web コンポーネントでのメソッドの呼び出しとイベントのサブスクライブは、選択した通常のフレームワークで慣れているものとは少し異なる場合がありますが、それほど複雑ではありません。 方法を見てみましょう。
タブ
タブ コンポーネント (） があります show 方法、特定のタブを手動で表示します。 これを呼び出すには、タブの基になる DOM 要素にアクセスする必要があります。 Svelteでは、それは使用することを意味します bind:this. React では、 ref. 等々。 Svelte を使用しているので、変数を宣言しましょう。 tabs インスタンス：
let tabs;
…そしてそれをバインドします:
これで、それを呼び出すボタンを追加できます。
イベントも同じ考えです。 あります sl-tab-show イベント 新しいタブが表示されたときに発生します。 使用できます addEventListener 私たちの上 tabs 変数、または Svelte を使用できます on:event-name ショートカット。
console.log(e)}>これは機能し、さまざまなタブを表示するとイベント オブジェクトがログに記録されます。
通常、タブをレンダリングし、ユーザーがそれらの間をクリックできるようにするため、この作業は通常は必要ありませんが、必要な場合はそこにあります。 ダイアログコンポーネントをインタラクティブにしましょう。
対話
ダイアログ コンポーネント (）かかります open ダイアログが…開いているかどうかを制御する小道具。 Svelte コンポーネントで宣言しましょう。
let tabs;
let open = false;
それはまた持っています sl-hide ダイアログが非表示になったときのイベント。 私たちを渡しましょう open prop と bind に hide これにより、ユーザーがダイアログ コンテンツの外側をクリックしてダイアログを閉じたときに、イベントをリセットできます。 そして、その閉じるボタンにクリック ハンドラーを追加して、 open への支持 false、これもダイアログを閉じます。
open = false}>
Hello World!
最後に、ダイアログを開くボタンを接続しましょう。
そして、それはそれです。 コンポーネント ライブラリの API とのやり取りは、多かれ少なかれ簡単です。 この投稿がそれだけだったら、かなり退屈でしょう。
しかし、Shoelace は Web Components で構築されているため、一部の要素 (特にスタイル) が、これまでとは少し異なる動作をすることになります。
すべてのスタイルをカスタマイズ！
これを書いている時点では、Shoelace はまだベータ版であり、作成者はいくつかのデフォルト スタイルを変更することを検討しています。場合によっては、一部のデフォルトを完全に削除して、ホスト アプリケーションのスタイルを上書きしないようにすることも考えられます。 ここで説明する概念はどちらにも関連していますが、使用するときに言及した Shoelace の仕様の一部が異なっていても驚かないでください。
Shoelace のデフォルトのスタイルが優れているのと同様に、Web アプリに独自のデザインがあり、UX コンポーネントを一致させる必要があります。 Web Components の世界でそれをどのように行うか見てみましょう。
私たちは実際にしようとはしません 改善します なんでも。 靴紐の作成者は、私よりもはるかに優れたデザイナーです。 代わりに、方法を見ていきます 変化する 独自の Web アプリに適応できるようにします。
Shadow DOM のクイック ツアー
DevTools でこれらのタブ ヘッダーの XNUMX つを見てみましょう。 次のようになります。
私たちのタブ要素は div とコンテナ .tab & .tab--active クラス、および tabindex、そのタブに入力したテキストも表示します。 しかし、それはの中に座っていることに注意してください シャドウルート. これにより、Web コンポーネントの作成者は、独自のマークアップを Web コンポーネントに追加できると同時に、コンテンツの場所も提供できます。 we 提供。 注意してください エレメント？ これは基本的に、「ユーザーがレンダリングしたコンテンツをすべて配置する」ことを意味します の間に Web コンポーネント タグ こちらに設立された地域オフィスに加えて、さらにローカルカスタマーサポートを提供できるようになります。」
だから コンポーネントは、シャドウ ルートを作成し、適切なスタイルのタブ ヘッダーとプレースホルダー () コンテンツを内部にレンダリングします。
カプセル化されたスタイル
Web 開発における古典的でイライラする問題の XNUMX つは、常にスタイルです。 カスケーディング 望まない場所へ。 次のようなものを指定するアプリケーションのスタイル ルールについて心配するかもしれません。 div.tab これらのタブに干渉します。 これは問題ではないことがわかりました。 シャドウ ルートはスタイルをカプセル化します。 シャドウ ルートの外側からのスタイルは、シャドウ ルートの内側にあるものには影響しません (後で説明するいくつかの例外を除きます)。逆もまた同様です。
これに対する例外は、継承可能なスタイルです。 もちろん、申請する必要はありません font-family Web アプリのすべての要素のスタイル。 代わりに、 font-family 一度、 :root or html その下のすべての場所を継承します。 実際、この継承は、シャドウ ルートも貫通します。
CSSカスタムプロパティ (「css 変数」と呼ばれることが多い) は、関連する例外です。 シャドウ ルートは、シャドウ ルートの外部で定義された CSS プロパティを完全に読み取ることができます。 これはすぐに重要になります。
::part セレクタ
スタイルはどうですか しない 継承します。 次のようなものをカスタマイズしたい場合はどうなりますか cursor、シャドウ ルート内の何かで、継承されません。 私たちは運が悪いのでしょうか？ そうではないことがわかりました。 上のタブ要素の画像とそのシャドウ ルートをもう一度見てください。 注意してください part の属性 div? これにより、シャドウルートの外側からその要素をターゲットにしてスタイルを設定できます。 ::part セレクタ. 例を少し見ていきます。
靴ひもスタイルのオーバーライド
これらの各アプローチの実際の動作を見てみましょう。 今のところ、 たくさん フォントを含む靴紐のスタイルは、CSS カスタム プロパティからデフォルト値を受け取ります。 これらのフォントをアプリケーションのスタイルに合わせるには、問題のカスタム props をオーバーライドします。 見る ドキュメント Shoelace が使用している CSS 変数に関する情報については、DevTools で特定の要素のスタイルを簡単に調べることができます。
シャドウ ルートによるスタイルの継承
Video Cloud Studioで app.css 内のファイル src のディレクトリ StackBlitz プロジェクト。 の中に :root 下部のセクションに、 letter-spacing: normal; 宣言。 以来、 letter-spacing プロパティは継承可能です。次のように新しい値を設定してみてください 2px. 保存すると、シャドウ ルートで定義されたタブ ヘッダーを含むすべてのコンテンツがそれに応じて調整されます。
Shoelace CSS 変数の上書き
コンポーネントは --indicator-color アクティブなタブの下線の CSS カスタム プロパティ。 これをいくつかの基本的な CSS でオーバーライドできます。
sl-tab-group {
--indicator-color: green;
}緑色のインジケータができました。
パーツのクエリ
私が現在使用している Shoelace のバージョン (2.0.0-beta.83) では、無効になっていないタブには pointer カーソル。 これを、アクティブな (選択された) タブのデフォルトのカーソルに変更しましょう。 私たちはすでに見ました 要素を追加します part="base" タブ ヘッダーのコンテナの属性。 また、現在選択されているタブには active 属性。 これらの事実を使用して、アクティブなタブをターゲットにし、カーソルを変更してみましょう。
sl-tab[active]::part(base) {
cursor: default;
}そしてそれはそれです！
アニメーションのカスタマイズ
比喩的なケーキのアイシングとして、Shoelace を使用してアニメーションをカスタマイズする方法を見てみましょう。 シューレースは、 WebアニメーションAPI、および公開します setDefaultAnimation さまざまな要素がさまざまな相互作用をアニメーション化する方法を制御する API。 詳細についてはドキュメントを参照してください。ただし、例として、Shoelace のデフォルトのダイアログ アニメーションを外側に拡大して内側に縮小する方法を変更して、代わりに上からアニメーション化し、非表示にしながらドロップダウンする方法を次に示します。
import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";
setDefaultAnimation("dialog.show", {
keyframes: [
{ opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
],
options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
keyframes: [
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
{ opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
],
options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});そのコードは App.svelte ファイル。 元のデフォルト アニメーションを表示するには、コメント アウトします。
包み込む
Shoelace は、Ceb コンポーネントで構築された非常に野心的なコンポーネント ライブラリです。 Web コンポーネントはフレームワークに依存しないため、どのプロジェクトでも、どのフレームワークでも使用できます。 驚くべきパフォーマンス特性と使いやすさの両方を備えた新しいフレームワークが出始めているため、どのフレームワークにも縛られない高品質のユーザー エクスペリエンス ウィジェットを使用する機能は、これまで以上に魅力的になりました。
