Lightning Web コンポーネントの作成セクションのCSSの話。
CSS | Lightning Web Components 開発者ガイド | Salesforce Developers
Lightning Design System を使用してコンポーネントのスタイルを設定する
LWC開発のスタイルはLightning Design Systemを適用するのが基本となる。通常はSLDSを宣言してclassを宣言していく形ですが、LWCでは専用タグを宣言することで適用できます。
専用タグはこういうの。LWC開発の際には用意されたこの書き方をした方が良いみたいです。
SLDSのスタイルをベースに開発していきますが、独自のCSSを追加するときには、「.css」ファイルに実装していく感じ。そのときには、「.slds-button」のようなSLDSのクラスを変更しようとするのはNGで、独自のクラスを宣言するようにします。
Lightning 基本コンポーネントの設計バリエーションの使用
専用タグでは、titleやlabelやonlickなど宣言しますが、このあたりは基本HTMLの標準タグと同じ属性を宣言している感じです。SLDSの専用の属性は『variant』で宣言する感じみたいです。
また、LWC開発では一部特定のタグでは、通常のHTMLタグのclassでSLDSのクラスを宣言して適用できるみたいです。
Lightning Design System スタイル設定フックを使用したコンポーネントのスタイル設定
こういう書き方できますよーって感じの内容でした。
SLDS ブループリントからのコンポーネントの作成
これもこういう書き方あります。って感じかなと思います。
Lightning Design System 設計トークンの使用
これもこういうことできますってレベルの話。ディープな使い方する場面じゃなければひとまず気にしなくていい内容。
カスタム Aura トークンの使用
Lightning Web コンポーネントの CSS ファイルでは、組織で作成または未管理パッケージからインストールしたカスタム Aura トークンを使用できるとのこと。使用場面はあまりなさそうな気はしますが、aura:tokenタグがLWCの中にあったらCSSを呼び出してるんだと思えば良さそう。
CSS スタイルシートによるコンポーネントのスタイル設定
LWCのCSSの書き方のサンプルと説明がまとめられています。
スタイル設定フックを公開するには、CSS カスタムプロパティを使用
覚えておいたほうが良さそうな内容。SLDSのスタイルを適用したいときの書き方になると思います。
コンポーネントのスタイル設定のアンチパターン
3種類のアンチパターンが紹介されています。SLDSの現在の構成に依存するような設定は避けましょうという感じでした。
- アンチパターン: 基本コンポーネントのレンダリングされた HTML のスタイル設定
- アンチパターン: SLDS クラスの上書き
- アンチパターン: 属性文字列の完全一致による querySelector
CSS スタイルルールの共有
LWCの基本のファイル構成ではHTML,JS,CSSがセットで存在しますが、別のCSSファイルを読み込んだりするときには、@importを使用すれば実現可能とのことです。
@importは対象CSSファイルのパス指定する感じで使用します。
まとめ
LWCのCSSに関する基本情報はこんな感じ。@importで別のCSSファイルの読み込みが行えることと、aura:tokenというタグがあること、カスタムCSSを用意する際にはSLDSのクラスを直接上書きしようとしたりはしないことというあたりを押さえておけば良さそうでした。
