合成 Shadow

合成 Shadow は、ネイティブ Shadow DOM の動作を模倣するポリフィルです。Salesforce は、従来のブラウザーとの後方互換性を確保するためにポリフィルを保持します。現在、Lightning Experience とエクスペリエンスビルダーサイトでは、デフォルトで合成 Shadow を使用します。また、これは LWC OSS (インポート) または Lightning Web Runtime (設定オプション) でも使用できます。

Lightning Experience をサポートするすべてのブラウザーで、ネイティブ Shadow がサポートされるため、合成 Shadow ポリフィルは必要なくなりました。Salesforce では、混合 Shadow モード (ベータ) を使用して合成 Shadow からネイティブ Shadow に移行することに尽力しています。

合成 Shadow でコンポーネントを表示する場合、LWC はネイティブ Shadow の動作を模倣する属性を追加します。いくつかの lightning-input コンポーネントが含まれるカスタムコンポーネント c-hello-input があるとします。DOM では次のように表示されます。

LWC は、lightning-input の難読化された文字列として lwc-66unc5l95ad-host 属性を生成し、コンポーネント内の CSS の範囲を設定します。これにより、ネイティブ Shadow DOM の動作が模倣されます。たとえば、lightning-input のスタイル設定を指定すると、実行時に CSS 範囲トークンが要素に適用されます。

これらの属性は、いつでも変更される可能性のある内部実装であるため、依存しないようにしてください。「コンポーネントのスタイル設定のアンチパターン」を参照してください。

LWC API バージョン 58.0 以前のカスタムコンポーネントの場合、CSS は実行時に次のようになります。

LWC API バージョン 59.0 以降のカスタムコンポーネントの場合、CSS は実行時に次のようになります。

合成 Shadow でのコンポーネントのスタイル設定は、ネイティブ Shadow DOM でのスタイル設定とほとんど同じです。「CSS スタイルシートによるコンポーネントのスタイル設定」を参照してください。

合成 Shadow では、コンポーネントのスタイルはグローバルドキュメントレベルで実装されますが、属性を使用してスタイルの範囲が設定されます。LWC は、<style> type="text/css">div[lwc-66unc5l95ad-host] { border: 1px solid red }</style> 形式のスタイルを DOM の <head> 要素に追加します。ネイティブ Shadow DOM では、コンポーネントのスタイルはそのまま残ります。

合成 Shadow では、ドキュメントの最上位レベルの共有スタイルシートでページのすべてのコンポーネントのスタイルが設定される可能性があります。たとえば、SLDS スタイル設定は、各コンポーネントに読み込まれなくても Lightning Experience のページのすべてのコンポーネントで使用できます。

静的リソースを介して CSS をインポートし、合成 Shadow にグローバルにスタイルを適用するには、lightning/platformResourceLoaderloadstyle を使用します。SLDS はコンポーネントに範囲設定されないため、実行時の動作は Lightning Experience の SLDS と似ています。

コンポーネントに範囲設定されたスタイルを使用するには、コンポーネントの .css ファイルを使用するか、@import を使用して CSS モジュールをインポートします。

合成 Shadow では、次のセレクター特異性の順序 (高い順) が適用されます。

  • コンポーネントの CSS ファイルで定義された CSS (範囲設定)
  • @import を使用してインポートされた CSS (範囲設定)
  • loadStyle でインポートされた CSS (グローバル)

関連トピック