あああ、これも日本語版が無い？　WEB翻訳

Anti-Patterns for Styling Components

Lightning Web コンポーネントのスタイルを設定するときに開発者が犯すよくある間違いをいくつか紹介します。これらの手法はサポートされていません。これらの手法を回避できるように、いくつかの具体的な例を参照することが役立つことを願っています。

最も一般的なアンチパターンは、Lightning ベースコンポーネントのレンダリングされたマークアップに従ってスタイルを設定し、SLDS クラスとスタイルを直接オーバーライドすることです。また、クラス属性文字列の完全一致を使用して要素をクエリすることも避けてください。

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

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

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

基本コンポーネントのスタイルのオーバーライドは、文書化されたスタイルフックを使用する場合を除いてサポートされません。

「.」（ドット）は、指定したclass名の要素にスタイルを適用するクラスセレクタです。

CSSの記号の意味「#」「>」「$」など〜使い方とあわせて完全網羅〜

ここでよくある間違いは、SLDS クラスを独自のクラスに置き換えることです。

.myCustomClass .slds-class_name;

lightning-comboboxあなたの会社 Acme Widgets がカスタムコンポーネントの 1 つで基本コンポーネントを使用しているとします。便利だからという理由で SLDS クラスを Acme 独自のクラスに置き換えますが、これはよくある間違いです。コンポーネント CSS は.slds-combobox__inputセレクターをターゲットとしています。

.acme-combobox_box .slds-combobox__input;

Salesforce がセレクターlightning-comboboxを使用しないように変更し.slds-combobox__input、それが Acme コンポーネントのスタイルに悪影響を及ぼす場合、コンポーネントのスタイルを修正するのはユーザーの責任です。

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

さすがにidで指定するのことはなさそうだ。idは動的に振られているだろうから...

「#」は、指定したid名の要素にスタイルを適用するIDセレクタです。

アンチパターン: SLDS クラスのオーバーライド

SLDS セレクター名を取得して少し調整するだけで十分簡単ですが、サポートされていません。

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

サポートされていないオーバーライドの例をいくつか示します。

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

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

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

代わりに、「Lightning Design System でコンポーネントをスタイルする」で説明されているテクニックを使用してください。

/* Do this */
.my-custom-styles {
  padding: var(--lwc-spacingMedium); /* --lwc-spacingMedium: 16px; */
}

/* DON’T DO THIS */
.slds-button {
  padding: 16px;
}

スタイリングを段階的に適用します。

/* Do this */
.my-style {
  padding: var(--scoped-spacing);
}

/* DON’T DO THIS */
.slds-scoped-notification {
  padding: var(--scoped-spacing);
}

<div class="slds-scoped-notification my-style"></div>

CSS の正しい習慣を実践し、セレクターを過負荷にしないでください。

/* Don’t do this */
button.button {
  ...;
}
.card > * {
  ...;
}
.button {
  margin-bottom: 18px !important;
}
body.container > div.sidebar > article.card {
  ...;
}

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

Lightning Web コンポーネントの表示時間を短縮する最適化により、静的ノードの値styleと属性に余分な空白や予期しない文字が含まれて表示される場合があります。classこの変更はクラス属性またはスタイル属性に影響を与える可能性があるため、クラス属性またはスタイル属性を使用する JavaScript コードを更新してください。

以前は、属性文字列の正確な一致を使用して、クラス名を使用して要素をクエリするために空白を含めることができました。

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

属性はhighlight yellow次のようにレンダリングされました。

<div class="highlight yellow">

ただし、その属性は追加の空白を含めてレンダリングできるようになりました。

<div class=" highlight yellow">

空白を無視するセレクターを使用するように JavaScript コードを修正します。

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

アンチパターン: 生成された CSS スコープトークンに依存する

CSS のスコープをコンポーネント内に設定するために、LWC は属性とクラスを DOM 要素に自動的に追加します。これらの属性とクラスは内部実装の詳細であり、いつでも変更される可能性があります。

<c-cmp c-cmp_cmp-host>
  <span c-cmp_cmp></span>
</c-cmp>

コンポーネント名に似た生成された CSS スコープトークンを使用するのは簡単ですが、所有していないコンポーネントの内部に依存するとコードが破損する可能性があります。パフォーマンスの向上により、LWC は Winter '24 から CSS スコープトークンの難読化された文字列をという形式で生成しますlwc-hashstring。ここで、hashstringは一意の英数字文字列です。

<c-cmp lwc-2s44vctlls4-host>
  <span lwc-2s44vctlls4></span>
</c-cmp>

CSS スコープトークンの難読化された文字列を生成する変更は、LWC API バージョン 59.0 にアップグレードする場合にのみカスタムコンポーネントに影響します。ただし、この変更は、レコードページまたはリストビューに表示されるコンポーネントや基本 Lightning コンポーネントなど、Lightning Experience および Experience Builder サイトの Salesforce で作成されたコンポーネントに直ちに影響します。

this.template.querySelector()内部実装はいつでも変更される可能性があるため、コードやテストで内部属性やクラスに依存しないでください。を使用する代わりに、 template refs( )this.template.querySelector()を使用することもできます。lwc:ref