コンポーネントのスタイル設定のアンチパターン

Lightning Web コンポーネントのスタイルを設定するときのよくある開発者のミスを次に示します。これらの手法はサポートされていないため、いくつかの具体的な例を確認して、それらを回避できるようにしてください。

最も一般的なアンチパターンは、Lightning 基本コンポーネントのレンダリングされたマークアップに応じてスタイルを設定し、SLDS クラスおよびスタイルを直接上書きすることです。また、class 属性の文字列の完全一致によって要素を照会することも避ける必要があります。

アンチパターン: 基本コンポーネントのレンダリングされた HTML のスタイル設定

ブラウザコンソールをチェックして基本コンポーネントのレンダリングされた HTML を確認すると、表示される要素やクラスを対象にする CSS を作成したくなりますが、Salesforce では、レンダリングされた出力に基づくスタイル設定はサポートされていません。

パフォーマンスの改善、機能の強化、アクセシビリティのサポートのために、Salesforce にはコンポーネントの内部を再設計する柔軟性が必要です。そのため、リリースのたびにコンポーネントマークアップが同じようにレンダリングされることを前提とすることはできません。前提に基づいてスタイル設定を作成すると、将来スタイル設定が壊れる可能性があります。コンポーネントの機能や動作の変更は文書化されますが、内部の変更は文書化されません。

文書化されたスタイル設定フックを使用する場合を除き、基本コンポーネントのスタイル設定の上書きはサポートされません。

Important

SLDS クラスをいずれかの独自のクラスに置き換えるときのよくあるミスを次に示します。

1.myCustomClass .slds-class_name;

あなたの会社 Acme Widgets は、いずれかのカスタムコンポーネントで lightning-combobox 基本コンポーネントを使用しているとします。利便性を確保するために SLDS クラスを Acme の独自クラスに置き換えます (よくあるミス)。コンポーネントの CSS は、.slds-combobox__input セレクタを対象とします。

1.acme-combobox_box .slds-combobox__input;

Salesforce で .slds-combobox__input セレクタを使用しないように lightning-combobox が変更され、それにより Acme のコンポーネントのスタイル設定に悪影響があった場合、コンポーネントのスタイル設定を修正するかどうかはあなた次第になります。

コンポーネントをスタイル設定するときのサポートされる方法については、「Lightning Design System を使用してコンポーネントのスタイルを設定する」を参照してください。

アンチパターン: SLDS クラスの上書き

SLDS セレクタ名を取得して若干調整することは十分に単純な作業ですが、サポートされていません。

SLDS セレクタのプロパティを上書きすると、将来 SLDS が変更されたときにコンポーネントのスタイル設定に予期しない結果が生じる可能性があります。Lightning Design System は、継続的に改善されており、すべての変更が SLDS リリースノートで文書化されています。

サポートされていない上書きの例を次に示します。

1/* myButton.css */
2/* Anti-pattern - Don't do this */
3.slds-button_brand {
4  background-color: purple;
5}

1/* Don’t do this */
2.slds-button {
3  padding: 16px;
4}

1/* Don’t do this */
2.slds-scoped-notification {
3  padding: var(--scoped-spacing);
4}

上記の代わりに、「Lightning Design System を使用してコンポーネントのスタイルを設定する」で説明されている手法を使用してください。

アンチパターン: 属性文字列の完全一致による querySelector

Lightning Web コンポーネントの表示処理時間を改善する最適化により、静的ノードの style および class 属性の値に余分な空白や予期せぬ文字が表示されることがあります。class 属性や style 属性を使用している JavaScript コードは、この変更の影響を受ける可能性があるため、更新してください。

従来は、属性文字列の完全一致を使用し、空白を含めたクラス名による要素のクエリを行うことができました。

1/* Don’t do this */
2document.querySelector('[class="highlight yellow"]');

属性 highlight yellow は次のように表示されました。

1<div class="highlight yellow">

ただし、今回のリリースにより、この属性の表示に余分な空白が含まれることがあります。

1<div class=" highlight yellow">

空白を無視するセレクタを使用するよう JavaScript コードを修正してください。

1/* Do this instead */
2document.querySelector(".highlight.yellow");

The Japanese Summer '24 guide is now live

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