コンポーネントのスタイル設定フックの作成

カスタムコンポーネントのスタイル設定フックを公開するには、CSS カスタムプロパティを使用します。また、CSS カスタムプロパティを使用すると、コードが読みやすくなり、更新しやすくなります。

コンポーネントの API の一部としてコンポーネントのスタイル設定フックを文書化します。コンシューマは、スタイル設定フックの値を設定するだけで、コンポーネントのスタイルを変更できます。スタイルがどのように実装されているのかを把握する必要はありません。

公開プロパティを使用するスタイル設定 LWC

コンポーネントのスタイルシートで CSS カスタムプロパティを定義するには、プロパティに -- というプレフィックスを付けます。プロパティの値を挿入するには、var() を使用します。

1:host {
2  --important-color: red;
3}
4
5.important {
6  color: var(--important-color);
7}

CSS カスタムプロパティは、その親コンポーネントの値を継承します。継承されたプロパティは、Shadow DOM を貫通します。color などの一部の CSS プロパティも継承されます。CSS カスタムプロパティは継承されるため、コンシューマは DOM ツリーのより高いレベルで値を設定し、コンポーネントのスタイルを設定できます。

これらの CSS カスタムプロパティでは、2 つのテーマ ([光] と [闇]) のスタイル設定フックが作成されます。省略可能な 2 番目のパラメータとして代替値を var() に渡します。

1.light {
2  background-color: var(--light-theme-background-color, lightcyan);
3  color: var(--light-theme-text-color, darkblue);
4}
5
6.dark {
7  background-color: var(--dark-theme-background-color, darkslategray);
8  color: var(--dark-theme-text-color, ghostwhite);
9}

lwc.dev のプレイグラウンドでこのコードを試します。

Tip

関連トピック

Lightning Design System スタイル設定フックを使用したコンポーネントのスタイル設定

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。