追加する場所
パブリッククラスのみを対象にする
cart-external-*クラスを使用してください。エディターはこれらをオートコンプリートし、それ以外に対しては警告を表示します。
cart-external-*：パブリックでサポートされている対象です。これらを使用してください。それ自体にはスタイルがなく、あなたのCSSがフックするためだけに存在します。cart-internal-*：カート自身の内部構造で、組み込みのスタイリングがすべてここにあります。これらに対するセレクターはエディターがエラーとしてフラグを立てます。既存のすべてのカートが依存しているため軽々しく変更されることはありませんが、これらはあなたとの契約ではなくカート側が変更できるものです。代わりに対応するcart-external-*を通じてスタイルを変更してください。- エディターが認識しないその他の
cart-*クラスは警告としてフラグが立てられます。
マークアップ内には
cart-internal-*クラスが表示されます。各ブロックのデフォルトのカスタムテンプレートにも含まれます。これは想定どおりです。これらがブロックに組み込みの外観を与えているものだからです。ここでのルールは、カートがレンダリングするクラス名ではなく、このパネルであなたが書くセレクターについてのものです。ブロックのDOM構造を変更するカスタムテンプレートを書く場合は、どのクラス名を残しどれを外すべきかについてカスタムテンプレートのスタイリングを参照してください。Shadow DOM：カートは自己完結している
- テーマのCSSはカートに漏れ込まず、カートのCSSも外に漏れ出ないため、カスタムCSSは自動的にカートにスコープされ、サイトの他の部分と衝突しません。
- セレクターはカート内部の要素とクラスを参照する必要があります。カート外のページ要素を対象にしたセレクターは内部に届きません。
document.querySelectorもドロワーの中を見ることはできません。カート要素にアクセスするスクリプトはshadowRootを経由する必要があり、同じcart-external-*クラスを対象にします。
代わりにデザイン設定を使うべきとき
次に読むべきページ
- デザイン設定：組み込みのスタイリングコントロールで、最初に試すべきものです。
- カスタムテンプレート：CSSだけでは実現できない場合に、ブロックのマークアップを完全に置き換えます。
- Cart SDK：外観ではなく動作のために。