أين تضيفه
استهدف الأصناف العامة فقط
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: للسلوك بدلًا من المظهر.