HTML Academy · درس

Part وExportparts للتنسيق الخارجي

إتاحة أجزاء Shadow DOM لـ CSS الخارجي باستخدام part وexportparts

الدرس 4 من 413 خطوة

Part وExportparts للتنسيق الخارجي درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

الموازنة في العزلية

يمنع عزل الأنماط الصارم في Shadow DOM المستهلكين من إعادة تنسيق عناصر محددة داخل المكوّن. تعمل متغيرات CSS مع الخصائص العامة، لكن لا يمكنك مثلًا منح زر "close" الداخلي قيمة مخصّصة لـborder-radius. وتحل الأجزاء هذه المشكلة.

السمة part

ضع علامة part="name" على عنصر داخلي في شجرة الظل. ويمكن للمستهلكين بعد ذلك استهدافه باستخدام pseudo-element ::part(name): my-dialog::part(close-button) { color: red; }. يصبح العنصر المسمّى نقطة ربط للتنسيق، بينما تبقى بقية شجرة الظل معزولة.

// Shadow tree:
<button part="close-button">×</button>
// Page CSS:
my-dialog::part(close-button) {
  color: red;
  border-radius: 50%;
}

أجزاء متعددة في عنصر واحد

افصل بين الأسماء بمسافات لكشف عنصر واحد بوصفه عدة أجزاء: part="button primary". يستهدف ::part(button) العنصر بصورة عامة، بينما يستهدفه ::part(primary) بوصفه عنصرًا ذا نمط أساسي. تتم مطابقة كل اسم بصورة مستقلة.

قيود ::part

لا يتيح ::part سوى بعض الفئات الزائفة، مثل :hover و:focus و:disabled — ولا يتيح محدّدات العناصر التابعة أو أي تحديد بنيوي إضافي. فـ ::part(card) p غير صالح؛ إذ لا يمكنك الوصول إلى داخل الجزء باستخدام محدّدات العناصر التابعة.

تُمرّر exportparts الأجزاء

عندما يضمّن عنصر مخصّص عنصرًا مخصّصًا آخر داخل شجرة الظل الخاصة به، لا تكون أجزاء العنصر الداخلي مكشوفة عادةً للصفحة الخارجية. تمرّر السمة exportparts="close-button" على العنصر المتداخل تلك الأجزاء إلى المضيف الخارجي.

// Outer shadow:
<inner-element exportparts="close-button"></inner-element>
// Page:
outer-element::part(close-button) { color: red; }

إعادة التسمية عند التصدير

تصدّر exportparts="close-button: dismiss" الجزء الداخلي باسم جديد على العنصر الخارجي. يتيح ذلك للمكوّن الخارجي تقديم واجهة تسمية واضحة مستقلة عن العناصر الداخلية التي يركّبها.

الأجزاء مقابل خصائص CSS المخصّصة

تكشف الخصائص المخصّصة عن قيم مثل الألوان والمسافات والخطوط. أما الأجزاء فتكشف عن عناصر، مع إتاحة نطاق CSS كامل يشمل الحدود والتحويلات والحركات. استخدم الخصائص المخصّصة للرموز العامة، والأجزاء لتخصيص عنصر بعينه. ويمكن استخدام كليهما في المكوّن نفسه.

نمط تطبيق المظهر

تتمثل ممارسة أنظمة التصميم في كشف مجموعة صغيرة من الأجزاء للعناصر الأكثر تخصيصًا، مثل الأزرار والرؤوس والمؤشرات، إلى جانب مجموعة واسعة من الخصائص المخصّصة للألوان والمسافات والطباعة. ويمكن للمستهلكين تطبيق المظهر على مستوى القيمة أو على مستوى العنصر، بحسب احتياجاتهم.

ثبات أسماء الأجزاء

تصبح أسماء الأجزاء جزءًا من واجهة API العامة للمكوّن — وتغييرها يكسر CSS الخاصة بالمستهلكين. اختر أسماء تصف دور العنصر، مثل "close-button" و"header" و"track"، بدلًا من موضعه، مثل "first-button"، حتى تظل الواجهة ذات معنى مع تطوّر التنفيذ.

إرشادات التوثيق

اذكر جميع الأجزاء المتاحة، بما فيها الأجزاء المُصدّرة، في ملف README الخاص بالمكوّن. فمن دون توثيق، يضطر المستهلكون إلى فحص DOM لاكتشاف الأجزاء، مما يربطهم بما يصادف أن يجدوه. تعامل مع قائمة الأجزاء كما تتعامل مع قائمة props في مكوّنات أطر العمل.

دعم المتصفحات

يتوفر ::part وexportparts في جميع المتصفحات الحديثة. وحتى الإصدارات الأقدم من Safari تدعم ::part الآن. استخدمهما بحرية؛ أما المتصفحات القديمة جدًا، التي لم يعد معظمها مستخدمًا، فيمكن فيها اللجوء إلى خصائص CSS المخصّصة الإضافية كحل بديل.

اختبار الفهم

ماذا تفعل السمة exportparts؟

أجب عليها في الدرس التفاعلي

الخلاصة

تكشف السمة part عناصر الظل الفردية للتنسيق الخارجي عبر ::part(name)، مع توفير إمكانات CSS كاملة من دون كسر العزلية. تمرّر exportparts الأجزاء من العناصر المخصّصة المتداخلة إلى المضيف الخارجي، مع إمكانية إعادة تسميتها. اجمع بين الأجزاء وخصائص CSS المخصّصة لتوفير واجهة كاملة لتطبيق المظهر، ووثّق قائمة الأجزاء باعتبارها جزءًا من API المكوّن.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «Part وExportparts للتنسيق الخارجي» مجاني؟

نعم — نص درس «Part وExportparts للتنسيق الخارجي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «Part وExportparts للتنسيق الخارجي»؟

إتاحة أجزاء Shadow DOM لـ CSS الخارجي باستخدام part وexportparts تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «Part وExportparts للتنسيق الخارجي»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy