フレームワークに依存しないコンポーネントベースのUXライブラリであるShoelaceの紹介

この記事では、Cory Laviskaが作成したコンポーネントライブラリであるShoelaceを紹介しますが、ユニークです。タグ、モーダルボックス、アコーディオン、オートコンプリートなど、すべての標準のUXコンポーネントを定義します。これらのコンポーネントは箱から出しており、美しく、使いやすく、完全にカスタマイズ可能です。ただし、これらのコンポーネントは、React、Solid、またはSvelteなどのフレームワークを使用していませんが、Webコンポーネントを使用できます。

準備

Webコンポーネントは素晴らしいですが、現時点では注意を払うべきいくつかの小さな問題がまだあります。

反応

以前には、JavaScriptフレームワークで使用できると言ったことがありますが、Webコンポーネントに対するReactのサポートが現在貧弱である前にも書いています。この問題を解決するために、ShoelaceはReactのために特別にラッパーを作成しました。

私が個人的に好むもう1つのオプションは、Webコンポーネントのタグ名とそのすべてのプロパティを受け入れる軽量のReactコンポーネントを作成し、Reactの欠点を処理することです。このオプションについては、以前の投稿で説明しました。このスキームは、削除するように設計されているため、私はこのスキームが好きです。 Reactの実験ブランチは、Webコンポーネントの相互運用性の問題を解決したため、公開されると、使用される軽量のWebコンポーネントの相互運用性コンポーネントを検索および削除でき、Reactラッパーなしで直接Webコンポーネントの使用を残します。

サーバーサイドレンダリング（SSR）

この記事の執筆時点では、SSRのサポートも貧弱です。理論的には、SSRを実装できる宣言的シャドウDOM（DSD）と呼ばれる手法があります。ただし、ブラウザのサポートは限られており、DSDは実際に

サーバーサポートを適切に動作させる必要があります。つまり、次にリミックス、またはサーバーで使用するその他のツールには、特別な処理能力が必要です。

つまり、SSRの次のようなツールを使用するWebアプリケーションでWebコンポーネントを「適切に動作させる」他の方法があります。要するに、タグを解析する前に、Webコンポーネントを登録するスクリプトをブロックスクリプトで実行する必要があります。しかし、これは別の投稿の主題になります。

もちろん、あらゆるタイプのクライアントレンダリングスパを構築している場合、これは問題ではありません。これがこの投稿で使用するものです。 start

この投稿にShoelaceとそのWebコンポーネント機能に焦点を当てたいので、すべてにSvelteを使用します。また、このstackblitzプロジェクトを使用してデモンストレーションします。このデモを段階的に組み立てますが、いつでもREPLを開いて最終結果を確認できます。

shoelaceの使用方法と、さらに重要なことには、カスタマイズする方法を紹介します。シャドウドムと、それらがブロックする外部スタイル（およびどのスタイルがブロックされていないか）について説明します。また、

CSSセレクター（真新しいかもしれませんが、Shoelaceがさまざまなアニメーションを上書きしてカスタマイズする方法についても説明します。

この記事を読んだ後にShoelaceを楽しんでいて、Reactプロジェクトで試してみたい場合は、私の提案は私の紹介で言及されたラッパーを使用することです。これにより、Shoelaceの任意のコンポーネントを使用でき、Reactが既に持っているWebコンポーネントの修正を解放すると、完全に削除できます（バージョン19で見つける）。

shoelaceはじめに

Shoelaceには、詳細なインストール手順があります。最も簡単な方法は、HTMLドキュメントに<script></script>および<link>タグを追加することです。それだけです。ただし、生産アプリケーションの場合、必要なものを選択的にインポートするだけで、それに応じて指示もあります。

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>

これにより、美しくスタイルのラベルが表示されます。アクティビティタグのアンダースコアは、アニメーション化され、あるアクティビティタグから次のアクティビティタグにスライドします。

ShoelaceのWebサイトで詳細に文書化されている各APIの詳細を説明する時間を無駄にしません。代わりに、これらのWebコンポーネントをやり取りし、完全にカスタマイズする最善の方法を見てみましょう。

APIとの対話：メソッドとイベント

Webコンポーネントの呼び出しメソッドとサブスクリプションイベントは、慣れている通常のフレームワークとはわずかに異なる場合がありますが、これはそれほど複雑ではありません。それを行う方法を見てみましょう。

タグ

タグコンポーネント（

）には、特定のタグを手動で表示する<sl-tab-group></sl-tab-group>メソッドがあります。それを呼び出すには、タグの基礎となるDOM要素にアクセスする必要があります。 Svelteでは、これはshowを使用することを意味します。 Reactでは、Refになります。等Svelteを使用しているので、タグインスタンス変数を宣言しましょう。 bind:this

…そしてそれをバインドします：

let tabs;

これで、ボタンを追加して呼び出すことができます：

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

同じことが

イベントにも当てはまります。新しいタグが表示されると、

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

イベントがトリガーされます。 変数にsl-tab-showを使用できます。 tabs addEventListener on:event-nameこれは、異なるタグが表示されたときにイベントオブジェクトを機能させ、ログにします。

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

通常、タグをレンダリングしてユーザーの間をクリックしてもらい、通常、この作業は必要ありませんが、必要な場合はそこにあります。次に、ダイアログコンポーネントをインタラクティブにしましょう。

ダイアログ

ダイアログコンポーネント（

）は、ダイアログボックスが開いているかどうかを制御するA

<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プロパティをfalseに設定しましょう。これもダイアログを閉じます。 open open

最後に、[開く]ダイアログボタンを接続しましょう：

let tabs;

それだけです。コンポーネントライブラリのAPIとの相互作用は、多かれ少なかれ直接的です。この記事がこれのみを行う場合、それは非常に退屈です。

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

しかし、靴棚 - ウェブコンポーネントで構築された - は、何か、特にスタイルが私たちが慣れているものとは少し異なる動作をすることを意味します。

すべてのスタイルをカスタマイズしてください！

執筆時点では、Shoelaceはまだベータ版であり、作成者はいくつかのデフォルトスタイルの変更を検討しており、いくつかのデフォルトスタイルを完全に削除して、ホストアプリケーションのスタイルを上書きしなくなります。とにかく紹介する概念は関連していますが、私が言及した靴ひもの詳細のいくつかがあなたがそれを使用するときに異なる場合でも驚かないでください。

Shoelaceのデフォルトスタイルは優れていますが、Webアプリケーションには独自のデザインがあり、UXコンポーネントがそれに一致することを願っています。 Webコンポーネントの世界でこれを行う方法を見てみましょう。

私たちは実際に何でも改善しようとはしていません。 Shoelaceの作成者は、私よりもデザインが優れています。代わりに、自分のWebアプリケーションに適応できるように、

スタッフを変更する方法を検討します。

シャドウdom をクイックビュー devtoolsのタグタイトルの1つを表示します タグ要素​​は、

および

クラスと

を備えたdivコンテナを作成し、そのタグに入力したテキストも表示します。ただし、

シャドウルート

内にあることに注意してください。これにより、Webコンポーネントの著者は、Webコンポーネントに独自のタグを追加することができ、提供するものを配置する場所も提供できます。

要素に注意してください。これは基本的に、「ユーザーがWebコンポーネントのタグ間でレンダリングするものを.tab unter.tab--active」とすることを意味します。 tabindex したがって、コンポーネントはシャドウルートを作成し、それに何かを追加して、素敵なスタイルのラベルタイトルと、コンテンツをレンダリングするプレースホルダー（<slot></slot>）をレンダリングします。 パッケージングスタイル

Web開発における古典的でイライラする問題は、常にそれらが表示されたくないスタイルのカスケードでした。 <sl-tab></sl-tab>のようなものを指定するアプリケーションのスタイルルールは、これらのタグを妨害することを心配するかもしれません。これは問題ではないことがわかります。影のルートの外側のスタイルは、影のルートの内側にあるものには影響しません（後で説明する場合があります）、逆も同様です。 <slot></slot>これの例外は継承可能なスタイルです。もちろん、Webアプリケーション内のすべての要素に

スタイルを適用する必要はありません。代わりに、前回font-familyまたは:rootを指​​定して、その下のすべてを継承させることができます。この継承は、実際にシャドウルートに浸透します。 html font-familyCSSカスタムプロパティ（一般に「CSS変数」と呼ばれる）は、関連する例外です。シャドウルートは、シャドウルートの外で定義されているCSSプロパティを間違いなく読み取ることができます。

selector

::part継承されていないスタイルはどうですか？シャドウルートの内部（継承しない

など）の内部に何かをカスタマイズしたい場合、私たちは不運ですか？私たちはしなかったことがわかります。上記のラベル要素イメージとその影のルートをもう一度チェックしてください。 divの

属性に注意してください。これにより、セレクターを使用して、影のルートの外側から要素を見つけてスタイルできます。段階的に例を紹介します。 cursor靴ひもスタイルを上書きpart ::partこれらの方法の実用的なアプリケーションを見てみましょう。現在のところ、多くの靴ひもスタイル（フォントを含む）は、CSSカスタムプロパティからデフォルト値を受け取ります。これらのフォントをアプリケーションのスタイルに合わせるには、関連するカスタムプロパティをオーバーライドします。 CSS変数Shoelaceが使用しているドキュメントを参照してください。または、Devtoolsの任意の要素のスタイルを単純に確認できます。

シャドウルートを介してスタイルを継承します

stackblitzプロジェクトのSRCディレクトリでapp.cssファイルを開きます。下部のセクションには、ステートメントが表示されます。

属性は継承可能であるため、

などの新しい値を設定してみてください。保存後、それに応じてすべてのコンテンツ（Shadow Rootで定義されたタグタイトルを含む）は調整されます。

Shoelace CSS変数を上書き:root letter-spacing: normal;letter-spacingコンポーネントは、アクティブタグのアンダースコア用のa 2px cssカスタムプロパティを読み取ります。基本的なCSSを使用してオーバーライドできます。

それだけです、緑色のインジケーターがあります！

お問い合わせパート

<sl-tab-group></sl-tab-group>現在使用している靴ひもバージョン（2.0.0-beta.83）では、障害のないタグにはポインターカーソルがあります。アクティブ（選択された）タグのデフォルトカーソルに変更しましょう。タグタイトルのコンテナに--indicator-color要素が

属性を追加するのを見てきました。さらに、現在選択されているタグは

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

属性を受信します。これらの事実を使用してアクティブなタグを見つけてカーソルを変更しましょう：

それだけです！

カスタムアニメーション

ケーキにアイシングを追加するには、Shoelaceがアニメーションをカスタマイズする方法を見てみましょう。 ShoelaceはWeb Animations APIを使用し、A APIを公開して、さまざまな要素がさまざまなインタラクションをアニメーション化する方法を制御します。詳細については、ドキュメントを参照してください。たとえば、Shoelaceのデフォルトのダイアログアニメーションを展開して内側に縮小してから、トップアニメーションから入り、非表示になったときに下向きに移動する方法をご覧ください。 setDefaultAnimation

<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コンポーネントを使用して構築された非常に野心的なコンポーネントライブラリです。 Webコンポーネントはフレームワークフリーであるため、プロジェクトの任意のフレームワークとともに使用できます。新しいフレームワークが驚くべきパフォーマンスの機能と使いやすさを示し始めると、どちらのフレームワークにもバインドされていない高品質のユーザーエクスペリエンスコンポーネントを使用できることは、これまで以上に魅力的です。

以上がフレームワークに依存しないコンポーネントベースのUXライブラリであるShoelaceの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。