CSS スタイルシートによるコンポーネントのスタイル設定

コンポーネントに一連のスタイルをバンドルするには、コンポーネントと同じ名前のスタイルシートをコンポーネントのフォルダーに作成します。スタイルシートは自動的にコンポーネントに適用されます。1 つ以上のスタイルシートを使用してコンポーネントのスタイルを設定する場合は、静的プロパティの stylesheets を設定します。

コンポーネントのフォルダーには、スタイルシートを 1 つだけ含めることができます。スタイルシートでは標準の CSS 構文が使用されるため、ほとんどのセレクターを使用できます。スタイルシートは、複数の CSS モジュールからスタイルルールをインポートできます。

Shadow DOM では、コンポーネントのスタイルシートで定義されたスタイルはそのコンポーネントに範囲設定されます。このルールにより、コンポーネントをそのスタイルを失うことなく異なるコンテキストで再利用できます。また、ページの他の部分のスタイルがコンポーネントのスタイルによって上書きされるのを防ぎます。

Deep Dive: Shadow DOM \& CSS in Lightning Web Components (詳細: Lightning Web コンポーネントの Shadow DOM \& CSS)

この動画では、合成 Shadow での <div c-child_child> 形式を使用した CSS スタイル設定 (Winter '24 より前の CSS 範囲トークンの生成方法) について説明します。 以前の形式と現在の形式 <div lwc-12abcdefg-host> は、視覚的に異なりますが、CSS 範囲トークンとしての目的は同じです。

この例は、親コンポーネントで定義された CSS スタイルが子に到達しないしくみを示しています。c-parentc-child の 2 つのコンポーネントがあります。各コンポーネントには <h1> タグが含まれます。parent.css スタイルシートでは h1 スタイルが xx-large として定義されます。コードを実行すると、スタイルは親の <h1> タグにのみ適用され、ネストされた子の <h1> タグには適用されません。

親のテキストは特大です。子のテキストは通常サイズです。

親コンポーネントは子コンポーネントをスタイル設定できますが、子コンポーネントを 1 つの要素としてスタイル設定します。親は子に到達できません。c-child セレクターを、子コンポーネントの周囲の境界線を定義する parent.css に追加しましょう。

子コンポーネントは赤いボックスで囲まれています。

では、c-child コンポーネントをその独自のスタイルシート child.css からスタイル設定しましょう。

セレクターを child.css に追加する前に、c-child セレクターを parent.css から削除して赤いボックスを削除しましょう。コンポーネントとその親の両方からコンポーネントをスタイル設定することはお勧めしません。混乱し、予期しない結果が生じる可能性があります。次の parent.cssc-child は削除されています。

コンポーネントのスタイルシートはその独自の要素 (この例では c-child) に到達し、その要素をスタイル設定できます。

c-child セレクターを使用する代わりに :host セレクターを使用します。

子コンポーネントの背景は黄色です。

:host を使用してホスト要素を対象とすることで、child.css からスタイルを <c-child> に適用しました。

:host セレクターは、省略可能なセレクターリストを受け入れます。一致するには、渡されたセレクターに一致するクラスがホスト要素に必要です。:host セレクターのしくみを確認するため、サンプルコードを書き換えて、もう少し実際のアプリケーションのようにしましょう。[ToDo リスト] の項目の名前を渡すことができるように <slot>c-child に追加します。

子コンポーネントの h1 をスタイル設定しましょう。ただし、サイズは large にします。これは、親コンポーネントで定義した xx-large h1 よりも少し小さいサイズです。また、有効な項目を除いてすべてのリスト項目をライトグレーにしましょう。有効な項目はライトグリーンです。

親に 3 つの c-child コンポーネントを追加し、その 1 つを有効にしましょう。実際のアプリケーションでは、有効なコンポーネントは、選択された項目です。

有効な To Do 項目がライトグリーンで表示されている To Do リスト。

カスケード、特異性、継承に関する CSS ルールは、Shadow DOM に適用されます。

カスケードは、要素に適用される各種スタイルシートの CSS ルールの組み合わせを表しています。コンポーネントの <div> のセレクターが複数あり、プロパティが同じ場合、最後に定義されたプロパティ (この例では background: red) がブラウザーで使用されます。これが特異性となります。

セレクターの特異性を高めるには、CSS クラスを使用するか、そのセレクターが表示される要素を含めます。ID セレクターは実行時にグローバルに一意の値に変換されるため、サポートされません。次の例では、lightning-card 要素を追加してその <div> タグに的を絞り、特異性を高めています。

CSS クラスセレクターを使用すると、特異性がより高くなります。.somecolor クラスセレクターを使用する <div> タグには、最後に定義された background:red ではなく background: blue; が適用されます。

カスケードされた値が見つからない場合、CSS の継承が適用されます。colorfont などの一部のプロパティ値は、親要素から継承されます。次のコンポーネントの HTML マークアップを考えます。

この CSS クラスセレクターでは、color プロパティが <div> 親要素から継承されるため、「Some text」が赤色で表示されます。

すべてのプロパティで親要素から色を継承できるわけではありません。CSS プロパティが継承されるかどうかを確認するには、W3C または MDN ドキュメントを参照してください。プロパティが継承されると、親のスタイルが子に適用されます。継承されないプロパティ (border など) は、初期値に設定されます。

Shadow DOM では、カスケードされたスタイルはコンポーネントに影響しませんが、継承されたスタイルはこの限りではありません。カスケードされたスタイルはシャドウ境界をトラバースしませんが、継承された値はシャドウ境界をトラバースします。

次の例では、c-child は Shadow DOM で表示されますが、c-child コンポーネントのテキストは赤になります。color は継承されるプロパティであるため、Shadow DOM でも継承されます。

また、CSS カスタムプロパティもシャドウ境界をトラバースします。

CSS 範囲指定は、次のいくつかの例外を除き、CSS Scoping Module Level 1 (CSS 範囲指定モジュールレベル 1) 標準に一致します。

  • :host-context() 疑似クラス関数はサポートされません。
  • ::part 疑似要素はサポートされません。
  • CSS 内の ID セレクターはサポートされません。id 値が HTML テンプレート内で一意であるようにします。テンプレートを表示するときに、id 値が、グローバル一意値に変換される場合があります。CSS 内で ID セレクターを使用すると、変換された ID に一致しなくなります。
  • LWC では、コンポーネントのカスタム公開プロパティは、対応する HTML 属性に反映されません。スタイル設定用の ID を子要素に与えるには、class 属性または data-* 属性を使用します。

範囲設定された CSS はパフォーマンスに影響するため、注意して使用してください。各セレクターチェーンは範囲設定され、:host() に渡された各複合式は複数のセレクターに分散します。この変換によって、生成された CSS のサイズと複雑さが増します。また、それらが増すことにより、解析時間が長くなり、スタイルの再計算時間が長くなります。

CSS を確実にカプセル化するため、各要素に追加の属性が含まれますが、これによっても表示時間が長くなります。たとえば、<c-parent> 要素には c-parent_parent-host 属性があります。

1 つ以上のスタイルシートを使用してコンポーネントをカスタマイズするには、stylesheets 静的プロパティを LightningElement コンストラクターに追加します。このプロパティはスタイルシートの配列を受け入れ、そのデフォルト値は空の配列です。stylesheets プロパティは、Light DOM コンポーネントと Shadow DOM コンポーネントに設定できます。

例えば、スタイルシートの header-styles.cssbutton-styles.cssmyComponent に挿入するには、myComponent.jsstylesheets 静的プロパティを設定します。

LWC エンジンが最初に挿入するスタイルシートは myComponent.css です。このスタイルシートはコンポーネントのテンプレートに暗黙的に関連付けられているためです。次にエンジンは、stylesheets プロパティに関連付けられているすべてのスタイルシートを、配列内に示されている順序で読み込みます。stylesheets のこの設定に基づいて、myComponent はそのスタイルシートを myComponent.cssheader-styles.cssbutton-styles.css の順序で読み込みます。

LWC エンジンは、コンポーネントクラスの定義時にアプリケーションのライフタイムの stylesheets 配列をキャッシュします。コンポーネントのコードが評価された後に stylesheets を変更しても、挿入されたスタイルシートへの影響はありません。

サブクラスコンポーネントは、スーパークラスコンポーネントから stylesheets を自動的に継承しません。スーパークラスコンポーネントの stylesheets をサブクラスコンポーネントに拡張する場合は、super.stylesheets を使用して、スーパークラスの stylesheets をサブクラスコンポーネントのスタイルシートに手動でマージします。

関連トピック