){kind=small}
Webコンポーネントのスタイリング
所要時間：5 分
数ヶ月前、私たちはVonage Client SDKで使用するために作られたWeb Componentsのセットのリリースを発表しました。カンバセーションを作成し、それをコンポーネントに渡すだけです。各コンポーネントは、イベントのリスニングや送信など、すべての責任を処理し、開発者はアプリケーションの他の側面に取り組むことができます。正直なところ、私が考えていたほど、他の人がこの価値を見いだせるかどうかわからなかったので、エレメントはすべてデフォルトのスタイリングになっています。
嬉しいことに、私は間違っていた。実際に使ってくれている人たちがいて、主なフィードバックはスタイリングやその不足についてでした。そこでこのブログでは、Client SDKだけでなく、Web Components全般のスタイリング方法について説明します。
Shadow DOMは、Web Componentsを実現する技術の1つで、Web Componentのスタイリングが外部アプリケーションの影響を受けないようにすることができます。アプリケーションに sectionタグに position: absoluteタグを持っていて、それが Web コンポーネントの sectionタグを変更するとかなりまずいことになります。
Web Componentのエレメントにスタイルを設定したい場合はどうすればいいでしょうか？アプリケーションのすべてのボタンが同じように見えたらいいですよね？
ウェブ・コンポーネントについて調べたり、さまざまなデザイン・システムを見たりしているうちに、開発者が次のようなものを使っているのを目にした。 CSSカスタムプロパティ、別名CSS変数.ウェブ・コンポーネントの作者は、次のような変数を作成し、次のように宣言します。 --myelement-button-colorのように宣言します：
button {
background-color: var(--myelement-button-color, red);
}この変数が設定されていない場合は、赤がデフォルトの色となる。
周囲のアプリケーションでは、次のようにアプリケーションの残りの部分にマッチした値を割り当てることができる：
:root {
--myelement-button-color: blue;
}素晴らしい！しかし、ボタンのフォントの色についてはどうでしょうか？それには別のCSS変数が必要です。ボーダーの半径を合わせたい？別の変数が必要です。ボーダーの色？はい、別の変数です。
Web Component をカスタマイズすればするほど、変数の数はどんどん増えていきます。また、Web Component の作者が提供するものしか利用できないため、非常に制限されることもあります。
私たちに何ができるのか？
そこで ::partの出番だ。これはCSSの疑似要素で、例えば ::beforeや ::afterのような CSS 擬似要素で、Shadow DOM に入って Web Component のラベル付けされた部分をスタイル設定できます。ここまでの経緯については ここまでの経緯についてはMonica Dinculescuによるものです。
例として、Webコンポーネントの中にあるボタンを示します：
<button part="button">Click Me</button>外側のアプリケーションでは、このようにターゲットを絞ってボタンをスタイルすることができる：
custom-element::part(button) {
color: red;
border: 2px green solid;
font-size: 30px;
background-color: yellow;
}こうすることで、Webコンポーネントの作者はコンポーネントのさまざまな部分にラベルを付けるだけでよくなり、ユーザーは好きなようにスタイルを設定できます。
かなり素晴らしいだろう？
CSSカスタムプロパティと::partの導入により、Client SDK UI Web Componentsとそれらを一度にスタイル設定する方法を見てみましょう。
各コンポーネントには embedがあり、デフォルトのスタイルが表示されます。CSSのコメントを外すと、スタイルをカスタマイズできる例を見ることができます。自由に追加して試してみてください。
最もシンプルなコンポーネントから始めよう、 vc-typing-indicator.これは単なるテキストなので、アプリケーション内の他のテキストと同じようにスタイルを設定できます。以下はその例です：
次は vc-text-input.このコンポーネントには2つの部分がある。テキストを入力する入力部（ラベルは inputそしてメッセージを送信するボタンで、ラベルは button.
さて、チャットのメッセージを表示するコンポーネントだ、 vc-messages.外側のレベルにはメッセージがあり、その部分は次のようにラベル付けされている。 message.とラベル付けされているメッセージテキストで構成されています。 message-textと表示され、メッセージを送信したユーザは username.
ウェブ・アプリケーション・ユーザーのメッセージと他のユーザーからのメッセージを区別するために、以下のように mineに message, message-textと usernameの部分を追加します。
注：この例では、ユーザーのメッセージが他のユーザーと異なることは示されていません。これは、ユーザーがコンポーネントに渡されたConversationから決定されるためです。以下は、デフォルトのスタイルがどのように見えるかのスクリーンショットです：
Screenshot of the default syling of the vc-messages Web Component
この vc-membersコンポーネントはチャットのメンバーをリストします。これは順序なしリストで、リストには ulで、アイテムまたはメンバーは li.リストを読みやすくするために、交互に並ぶ行をスタイルできるようにするために、CSS 変数 --vc-members-nth-child-odd-colorと --vc-members-nth-child-even-colorを使用して色を追加します。
最後に、最も多くの要素を持つコンポーネントを紹介しよう、 vc-keypad.上から順に、数字が表示される。 input.ボタンは行にグループ化され、ラベルは. row.特定の行をターゲットにするには、次のように表示されます。 position1と表示されます。 position5.したがって、たとえば row position2はボタン 4、5、6 に影響します。
各ボタンには button.行と同じように、特定のボタンをターゲットにするには、その位置に追加します。例えば、"#"ボタンは、次の部分をターゲットにすることでスタイルを設定できます。 button position12.
図を含むより詳細な説明については Client SDK UI Web Components GitHubレポをご覧ください。.
これまで、Web Componentsのスタイリング方法について説明し、クライアントSDKで動作するように作成したWeb Componentsを例として紹介しました。
どのようにWebコンポーネントをスタイルしますか？Client SDK UI Componentsを使用したことがありますか？私たちの コミュニティSlackチャンネル!