شعار زيفيرنت

تعد الفئات الزائفة لمكونات الويب والعناصر الزائفة أسهل مما تعتقد

التاريخ:

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

أنا أشير على وجه التحديد إلى ::part و ::slotted العناصر الزائفة و :defined, :hostو :host-context الطبقات الزائفة. يعطوننا طرقًا إضافية للتفاعل مع مكونات الويب. دعونا نفحصهم عن كثب.

سلسلة المقالات

::part عنصر زائف

::part، باختصار ، يسمح لك باختراق شجرة الظل ، وهي مجرد طريقتي في لعبة Lord-of-the-Rings-y لأقول إنها تتيح لك تصميم عناصر في الداخل الظل DOM من في الخارج الظل DOM. من الناحية النظرية ، يجب عليك تغليف كل أنماطك الخاصة بـ Shadow DOM داخل Shadow DOM ، أي داخل ملف <style> عنصر في <template> جزء.

لذلك ، بالنظر إلى شيء مثل هذا من ذاته الجزء الأول من هذه السلسلة، حيث لديك ملف <h2> في الخاص <template>، أنماطك لذلك <h2> يجب أن تكون جميعها في <style> جزء.

<template id="zprofiletemplate"> <style> h2 { font-size: 3em; margin: 0 0 0.25em 0; line-height: 0.8; } /* other styles */ </style> <div class="profile-wrapper"> <div class="info"> <h2> <slot name="zombie-name">Zombie Bob</slot> </h2> <!-- other zombie profile info --> </div>
</template>

لكن في بعض الأحيان قد نحتاج إلى تصميم عنصر في الظل DOM بناءً على المعلومات الموجودة في الصفحة. على سبيل المثال ، لنفترض أن لدينا صفحة لكل زومبي في نظام الحب الأبدي مع المباريات. يمكننا إضافة فصل دراسي إلى الملفات الشخصية بناءً على مدى قربهم من المباراة. يمكننا بعد ذلك ، على سبيل المثال ، تحديد اسم المطابقة إذا كان مطابقًا جيدًا. قد يختلف تقارب المطابقة بناءً على قائمة المطابقات المحتملة التي يتم عرضها ولن نعرف هذه المعلومات حتى نتواجد في تلك الصفحة ، لذلك لا يمكننا إدخال الوظيفة في مكون الويب. منذ <h2> موجود في Shadow DOM ، على الرغم من ذلك ، لا يمكننا الوصول إليه أو تصميمه من خارج Shadow DOM مما يعني محددًا لـ zombie-profile h2 في صفحة المباريات لن تعمل.

ولكن ، إذا أجرينا تعديلًا طفيفًا على ملف <template> الترميز عن طريق إضافة ملف part تنسب إلى <h2>:

<template id="zprofiletemplate"> <style> h2 { font-size: 3em; margin: 0 0 0.25em 0; line-height: 0.8; } /* other styles */ </style> <div class="profile-wrapper"> <div class="info"> <h2 part="zname"> <slot name="zombie-name">Zombie Bob</slot> </h2> <!-- other zombie profile info --> </div>
</template>

مثل رذاذ بيانكا في الفم ، لدينا الآن القوى الخارقة لاختراق حاجز الظل DOM وتصميم تلك العناصر من في الخارج ل <template>:

/* External stylesheet */
.high-match::part(zname) { color: blue;
}
.medium-match::part(zname) { color: navy;
}
.low-match::part(zname) { color: slategray;
}

هناك الكثير من الأشياء التي يجب مراعاتها عندما يتعلق الأمر باستخدام CSS ::part. على سبيل المثال ، يعد تصميم عنصر داخل جزء أمرًا محظورًا:

/* frowny-face emoji */
.high-match::part(zname) span { ... }

ولكن يمكنك إضافة part السمة على هذا العنصر ونمطه عبر اسم الجزء الخاص به.

ماذا يحدث إذا كان لدينا مكون ويب داخل مكون ويب آخر؟ إرادة ::part ما زال يعمل؟ إذا ظهر مكوّن الويب في ترميز الصفحة ، أي أنك تضعه في الشقبة ، ::part يعمل بشكل جيد من CSS للصفحة الرئيسية.

<zombie-profile class="high-match"> <img slot="profile-image" src="https://assets.codepen.io/1804713/leroy.png" /> <span slot="zombie-name">Leroy</span> <zombie-details slot="zdetails"> <!-- Leroy's details --> </zombie-details>
</zombie-profile>

ولكن إذا كان مكون الويب موجودًا في قالب / ظل DOM ، فحينئذٍ ::part لا يمكن أن تخترق كلتا شجرتى الظل ، فقط الشجرة الأولى. نحن بحاجة إلى إحضار ::part في النور ... إذا جاز التعبير. يمكننا فعل ذلك بامتداد exportparts السمة.

لتوضيح ذلك سنضيف "علامة مائية" خلف الملفات الشخصية باستخدام مكون ويب. (لماذا؟ صدق أو لا تصدق ، كان هذا هو المثال الأقل اختراعًا الذي يمكنني التوصل إليه.) ​​إليك قوالبنا: (1) نموذج <zombie-watermark>، و (2) نفس النموذج لـ <zombie-profile> ولكن مع إضافة أ <zombie-watermark> عنصر في النهاية.

<template id="zwatermarktemplate"> <style> div { text-transform: uppercase; font-size: 2.1em; color: rgb(0 0 0 / 0.1); line-height: 0.75; letter-spacing: -5px; } span { color: rgb( 255 0 0 / 0.15); } </style> <div part="watermark"> U n d y i n g L o v e U n d y i n g L o v e U n d y i n g L o v e <span part="copyright">©2 0 2 7 U n d y i n g L o v e U n L t d .</span> <!-- Repeat this a bunch of times so we can cover the background of the profile --> </div> </template>
<template id="zprofiletemplate"> <style> ::part(watermark) { color: rgb( 0 0 255 / 0.1); } /* More styles */ </style> <!-- zombie-profile markup --> <zombie-watermark exportparts="copyright"></zombie-watermark>
</template>
<style> /* External styles */ ::part(copyright) { color: rgb( 0 100 0 / 0.125); }
</style>

منذ ::part(watermark) هو فقط ظل DOM واحدًا فوق <zombie-watermark>، يعمل بشكل جيد من داخل <zombie-profile>أنماط القالب. أيضًا ، منذ أن استخدمنا ملفات exportparts="copyright" على <zombie-watermark>، تم دفع جزء حقوق النشر إلى <zombie-profile>ظل DOM و ::part(copyright) يعمل الآن حتى في الأنماط الخارجية ، ولكن ::part(watermark) لن تعمل خارج <zombie-profile>نموذج.

يمكننا أيضا إعادة توجيه و إعادة تسمية الأجزاء بهذه السمة:

<zombie-watermark exportparts="copyright: cpyear"></zombie-watermark>
/* Within zombie-profile's shadow DOM */ /* happy-face emoji */
::part(cpyear) { ... } /* frowny-face emoji */
::part(copyright) { ... }

الفئات الهيكلية الزائفة (:nth-child، وما إلى ذلك) على الأجزاء أيضًا ، ولكن يمكنك استخدام الفئات الزائفة مثل :hover. لنحرك أسماء المطابقة العالية قليلاً ونجعلها تهتز لأنها تبحث عن بعض المحبوبين. حسنًا ، لقد سمعت ذلك وأوافق على أنه أمر محرج. دعونا ... آه ... نجعلها أكثر ، نقول ، ملحوظة ، مع قليل من الحركة.

.high::part(name):hover { animation: highmatch 1s ease-in-out;
}

::slotted عنصر زائف

::slotted ظهر عنصر CSS الزائف بالفعل عندما قمنا بتغطية مكونات الويب التفاعلية. الفكرة الأساسية هي أن ::slotted يمثل أي محتوى في slot في مكون الويب ، أي العنصر الذي يحتوي على slot السمة عليه. لكن أين ::part يخترق الظل DOM لجعل عناصر مكون الويب في متناول الأنماط الخارجية ، ::slotted لا يزال مغلفًا في <style> عنصر في المكون <template> والوصول إلى العنصر الموجود تقنيًا خارج الظل DOM.

لدينا في <zombie-profile> المكون ، على سبيل المثال ، يتم إدراج كل صورة ملف شخصي في العنصر من خلال ملف slot="profile-image".

<zombie-profile> <img slot="profile-image" src="photo.jpg" /> <!-- rest of the content -->
</zombie-profile>

هذا يعني أنه يمكننا الوصول إلى تلك الصورة - بالإضافة إلى أي صورة في أي فتحة أخرى - مثل هذا:

::slotted(img) { width: 100%; max-width: 300px; height: auto; margin: 0 1em 0 0;
}

وبالمثل ، يمكننا الاختيار من جميع فتحات ::slotted(*) بغض النظر عن العنصر. فقط احذر من ذلك ::slotted يجب أن تختار عنصرًا - العقد النصية محصنة ضده ::slotted أنماط الزومبي. ولا يمكن الوصول إلى العناصر الموجودة في الفتحة.

:defined فئة زائفة

:defined يطابق جميع العناصر المحددة (أعرف ، مفاجأة ، أليس كذلك؟) ، مضمنة ومخصصة. إذا كان العنصر المخصص الخاص بك يتنقل مثل الزومبي مع تجنب أسئلة والد صديقته حول الوضع "المعيشي" ، فقد لا ترغب في إظهار جثث المحتوى أثناء انتظارهم للعودة إلى الحياة errr ... load.

يمكنك استخدام :defined فئة زائفة لإخفاء مكون ويب قبل إتاحته - أو "تحديده" - مثل هذا:

:not(:defined) { display: none;
}

يمكنك أن ترى كيف :defined يعمل كنوع من النعناع في فم أنماط المكونات لدينا ، مما يمنع ظهور أي محتوى مكسور (أو تسرب رائحة الفم الكريهة) أثناء استمرار تحميل الصفحة. بمجرد تحديد العنصر ، سيظهر تلقائيًا لأنه الآن ، كما تعلم ، معرف وليس كذلك ليس يعرف.

أضفت أ setTimeout من خمس ثوان لمكون الويب في العرض التوضيحي التالي. بهذه الطريقة ، يمكنك أن ترى ذلك <zombie-profile> لا تظهر العناصر بينما هي غير معرّفة. ال <h1> و <div> الذي يحمل <zombie-profile> المكونات لا تزال موجودة. إنه فقط <zombie-profile> مكون الويب الذي يحصل على display: none لأنها لم يتم تعريفها بعد.

:host فئة زائفة

لنفترض أنك تريد إجراء تغييرات على نمط العنصر المخصص نفسه. بينما يمكنك القيام بذلك من في الخارج العنصر المخصص (مثل تشديد ذلك N95) ، لن يتم تغليف النتيجة ، وسيتعين نقل CSS الإضافي إلى أي مكان يتم وضع هذا العنصر المخصص فيه.

سيكون من الملائم جدًا إذن أن يكون لديك فئة زائفة يمكنها الوصول إليها في الخارج الظل DOM وحدد جذر الظل. أن فئة CSS الزائفة هي :host.

في الأمثلة السابقة طوال هذه السلسلة ، قمت بتعيين ملف <zombie-profile> العرض من CSS للصفحة الرئيسية ، مثل هذا:

zombie-profile { width: calc(50% - 1em);
}

بدافع :host، ومع ذلك ، يمكنني ضبط هذا العرض من في الداخل مكون الويب ، مثل هذا:

:host { width: calc(50% - 1em);
}

في الواقع ، كان هناك div مع فئة .profile-wrapper في الأمثلة التي يمكنني إزالتها الآن لأنه يمكنني استخدام جذر الظل كغلاف :host. هذه طريقة لطيفة لتقليل العلامات.

يمكنك عمل محددات فرعية من :host، ولكن لا يمكن الوصول إلا إلى الأحفاد داخل Shadow DOM - لا شيء تم إدخاله في مكون الويب الخاص بك (بدون استخدام ::slotted).

عرض أجزاء HTML ذات الصلة بـ: host pseudo-element.

هكذا قال، :host ليست خدعة زومبي واحدة. يمكن أن يأخذ أيضًا معلمة ، على سبيل المثال محدد فئة ، وسيتم تطبيق النمط فقط في حالة وجود الفئة.

:host(.high) { border: 2px solid blue;
}

يسمح لك هذا بإجراء تغييرات في حالة إضافة فئات معينة إلى العنصر المخصص.

يمكنك أيضًا اجتياز الفصول الزائفة هناك ، مثل :host(:last-child) و :host(:hover).

:host-context فئة زائفة

لنتحدث الآن :host-context. إنه مثل صديقنا :host()، ولكن على المنشطات. في حين :host تحصل على جذر الظل ، فلن يخبرك بأي شيء عن السياق الذي يعيش فيه العنصر المخصص أو عناصر الأصل والسلف.

:host-context، من ناحية أخرى ، يرمي الموانع للريح ، مما يسمح لك باتباع شجرة DOM أعلى قوس قزح إلى الجني في ثوب. فقط لاحظ أنه في الوقت الذي أكتب فيه هذا ، :host-context غير مدعوم في Firefox أو Safari. لذا استخدمه للتحسين التدريجي.

وإليك كيف يعمل. سنقسم قائمة ملفات تعريف الزومبي إلى قسمين. سيشتمل أول div جميع مباريات الزومبي العالية مع a .bestmatch صف دراسي. سيحمل div الثاني جميع مباريات الحب المتوسطة والمنخفضة مع a .worstmatch فئة.

<div class="profiles bestmatch"> <zombie-profile class="high"> <!-- etc. --> </zombie-profile> <!-- more profiles -->
</div> <div class="profiles worstmatch"> <zombie-profile class="medium"> <!-- etc. --> </zombie-profile> <zombie-profile class="low"> <!-- etc. --> </zombie-profile> <!-- more profiles -->
</div>

لنفترض أننا نريد تطبيق ألوان خلفية مختلفة على .bestmatch و .worstmatch الطبقات. نحن غير قادرين على القيام بذلك فقط :host:

:host(.bestmatch) { background-color: #eef;
}
:host(.worstmatch) { background-color: #ddd;
}

هذا لأن أفضل وأسوأ فئات المطابقة ليست على العناصر المخصصة لدينا. ما نريده هو أن نكون قادرين على تحديد العناصر الأصلية للملفات الشخصية من داخل Shadow DOM. :host-context الوخزات بعد العنصر المخصص لـ مباراة الفصول المطابقة التي نريد تصميمها.

:host-context(.bestmatch) { background-color: #eef;
}
:host-context(.worstmatch) { background-color: #ddd;
}

حسنًا ، شكرًا على التسكع رغم كل رائحة الفم الكريهة. (أعلم أنك لا تستطيع معرفة ذلك ، ولكن أعلاه عندما كنت أتحدث عنه من خلال التنفس ، كنت أتحدث عنه سرا my يتنفس.)

كيف تستخدم ملفات ::part, ::slotted, :defined, :hostو :host-context في مكون الويب الخاص بك؟ اسمحوا لي أن نعرف في التعليقات. (أو إذا كان لديك علاجات لرائحة الفم الكريهة المزمنة ، فستكون زوجتي كذلك جدا مهتم بسماع المزيد.)

بقعة_صورة

أحدث المعلومات الاستخباراتية

بقعة_صورة