スタイル設定フックを使用したLightning Experienceのカスタマイズ
Lightning Experienceは、高速性、洗練性、アクセス性の三拍子がそろっています。デザインや開発を行っている場合、Lightningのルック＆フィールを使って、簡単にエクスペリエンスを構築できます。App Builderを使用してレイアウトを視覚的に作成する場合でも、HTML、CSS、JSを作成する場合でも、Lightning Design Systemのおかげで、Lightning Experienceをいつでもすぐに利用できるため、余計な手間がかかりません。
デフォルトのルック＆フィールは（私のひいき目も少し入っているかもしれませんが）とてもすばらしいものですが、私たちLightning Design Systemチームは、多くのお客様がデフォルトのLightningのルック＆フィールをカスタマイズして、皆様の顧客、ブランド、ニーズをより反映させたいと考えていることも認識しています。このようなカスタマイズを行うための技術的な解決策はこれまでにも数多くありましたが、そうしたアプローチ（スタイルのオーバーライドやデフォルトスタイルの拡張など）はすべて脆弱なものでした。
- Lightning Webコンポーネントでは、ネイティブシャドウによるDOMのカプセル化が進行したことで、コンポーネントの内部に影響を与えるスタイルの適用が難しくなりました。
- SalesforceでコンポーネントDOMに変更を加えると、スタイルが適用されなくなります。また、新しい要件に合わせてこちらでスタイルを更新しても、ユーザの上書きによってスタイルが適用されない可能性もありました。
上記2つの問題の解決方法を探る一環として、よりメンテナンス性の高い方法でルック＆フィールを表現し、Web標準をより有効に活用する方法を再考したいと考えました。
スタイル設定フックのご紹介
スタイル設定フックをベータ機能としてWinter ‘21リリースより実装し、Spring ’21リリースでさらに改良を加える予定です。スタイル設定フックの機能は非常に優れています。スタイル設定フックを利用すると、LWCベースの基本コンポーネントにおけるデフォルトの外観を、コンポーネントのDOMに依存せずに、サポートされており、メンテナンス性の高い、直感的な方法でカスタマイズできます。
スタイル設定フックは内部的にCSSカスタムプロパティを利用しています。CSSカスタムプロパティは、再利用可能なスタイル値を定義するのに標準的な方法であり、カプセル化されたWebコンポーネントベースの環境で問題なく機能します。デフォルトの外観をカスタマイズするには、コンポーネントをターゲットにして、行おうとしている視覚的な変更の種類に応じて、公開されているCSSカスタムプロパティを指定するだけです。
たとえば、HTMLで次のようなlightning-buttonを定義しているとします。
<lightning-button variant="brand" label="Normal Button" title="Normal Button" class="my-css"> </lightning-button>
以下は、このボタンの外観をカスタマイズする方法の1つであり、左はデフォルトの外観、右はカスタマイズしたエクスペリエンス（ボタンの外観をスタイル設定フックにより変更している）となっています。
設定はこれだけです。各コンポーネントで公開されているスタイル設定フックについては、SLDSのドキュメントで、カスタマイズしたいコンポーネントをご確認ください。
スタイル設定フックとは何か、どのように使用するのかを詳しく調べて、複雑さが異なるサンプルを確認するには、スタイル設定の概要ページをご覧ください。
必要な手順
スタイル設定フックを使用すると、メンテナンス性が高く、サポートされている方法で、デフォルトのコンポーネントレベルのLightning Experienceをカスタマイズできます。現在、スタイルを上書きしている場合や、他の方法でデフォルトの外観を変更している場合は、今すぐにでも、あるいは近い将来この機能がベータ版から正式リリースされた時点にでも、スタイル設定フックへの移行計画を立てることを強くおすすめします。以下の手順に従ってください。
- スタイルの上書きを指定して、LWC内の基本コンポーネントの外観を上書きしているすべての領域を特定します。
- カスタマイズする種類のスタイル設定フックがコンポーネントに存在することを確認します。
- 必要なスタイル設定フックが利用できない場合や、ニーズに合わない場合は、こちらのフィードバックフォームよりリクエストを送信してください。いただいたご意見等は、スタイル設定フックの今後の更新に反映させていただきます。
- スタイル設定フックを使用したカスタマイズに移行します。
カスタムスタイル設定のニーズをすべて取り込むためにスタイル設定フックを使用することで、将来的な変更にも対応できるようになります。基盤となるコンポーネントに加えられたDOMの変更によって、設定したスタイルを見直す必要があるかどうかを心配する必要はありません。
また、Shadow DOMを介してコンポーネントの詳細なカプセル化を提供する場合、カスタマイズを行う準備も整っています。CSSカスタムプロパティは、Webコンポーネントの内部を外部からスタイル設定するための主要な方法の1つでもあります。
ワクワクしませんか？必要な情報については、こちらの詳細なドキュメントをご覧いただき、スタイル設定にお役立てください。
著者紹介
Kirupa Chinnathambiは、製品管理担当シニアディレクターであり、Lightning UI Platformチームの一員として、ピクセルの限界に挑戦しています。長年にわたって運営している自身のKIRUPAブログの一環として、デザイナーによるコード作成、コーダーによるデザインをサポートしています。Twitterで@kirupaをフォローしてください。
