كيف يعمل JS: تقنية Shadow DOM ومكونات الويب

اليوم ، في ترجمة 17 جزءًا من المواد المخصصة لميزات كل شيء مرتبط بطريقة ما بجافا سكريبت ، سنتحدث عن مكونات الويب والمعايير المختلفة التي تهدف إلى العمل معها. سيتم إيلاء اهتمام خاص لتقنية Shadow DOM.

مراجعة

مكونات الويب هي مجموعة من واجهات برمجة التطبيقات المصممة لوصف عناصر DOM الجديدة المناسبة لإعادة الاستخدام. يتم فصل وظائف هذه العناصر عن بقية التعليمات البرمجية ؛ يمكن استخدامها في تطبيقات الويب الخاصة بتصميمنا الخاص.

هناك أربع تقنيات تتعلق بمكونات الويب:

• Shadow DOM (Shadow DOM)
• قوالب HTML (قوالب HTML)
• عناصر مخصصة
• استيراد HTML (استيراد HTML)

في هذه المقالة ، سنتحدث عن تقنية Shadow DOM ، والتي تم تصميمها لإنشاء تطبيقات قائمة على المكونات. يوفر طرقًا لحل مشكلات تطوير الويب الشائعة التي ربما واجهتها بالفعل:

• عزل DOM: يحتوي المكون على شجرة DOM معزولة (وهذا يعني أن الأمر document.querySelector() لن يسمح بالوصول إلى العقدة في الظل DOM للمكون). بالإضافة إلى ذلك ، فإنه يبسط نظام محدد CSS في تطبيقات الويب ، حيث أن مكونات DOM معزولة ، مما يسمح للمطور باستخدام نفس المعرفات العالمية وأسماء الفئات في مكونات مختلفة دون القلق بشأن تعارضات الأسماء المحتملة.
• عزل CSS: قواعد CSS الموصوفة داخل الظل DOM تقتصر عليه. لا تترك هذه الأنماط العنصر ، ولا تختلط مع أنماط الصفحات الأخرى.
• التركيب: تطوير واجهة برمجة تطبيقات تعريفية للمكونات القائمة على الترميز.

تقنية الظل دوم

يفترض أنك تعرف بالفعل مفهوم DOM وواجهات برمجة التطبيقات المرتبطة. إذا لم يكن الأمر كذلك ، يمكنك قراءة هذه المواد.

Shadow DOM هو في الأساس نفس DOM المعتاد ، ولكن مع اختلافين:

• الأول هو كيفية إنشاء Shadow DOM واستخدامه ، على وجه الخصوص ، يتعلق بعلاقة Shadow DOM ببقية الصفحة.
• والثاني هو سلوك الظل الظل فيما يتعلق بالصفحة.

عند العمل مع DOM ، يتم إنشاء عقد DOM التي تنضم ، كعناصر فرعية ، إلى عناصر أخرى من الصفحة. في حالة تقنية Shadow DOM ، يتم إنشاء شجرة DOM معزولة تنضم إلى العنصر ، ولكن يتم فصلها عن عناصرها الفرعية العادية.

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

إنشاء الظل الظل

جذر الظل هو جزء من المستند الذي يعلق على عنصر المضيف. يكتسب عنصر الظل دوم عندما يتم إرفاق عنصر جذر الظل إليه. لإنشاء ظل DOM لعنصر معين ، تحتاج إلى استخدام أمر عنصر element.attachShadow() :

 var header = document.createElement('header'); var shadowRoot = header.attachShadow({mode: 'open'}); shadowRoot.appendChild(document.createElement('<p> Shadow DOM </p>'); 

وتجدر الإشارة إلى أنه في مواصفات Shadow DOM ، توجد قائمة بالعناصر التي لا يمكن توصيلها بأشجار DOM الفرعية.

التركيب في الظل الظل

تعد التركيبة واحدة من أهم ميزات Shadow DOM ، وهي طريقة لإنشاء تطبيقات الويب ، والتي يتم استخدامها في عملية كتابة كود HTML. خلال هذه العملية ، يقوم المبرمج بدمج كتل البناء (العناصر) المختلفة التي تشكل الصفحة ، وتعشيقها ، إذا لزم الأمر ، في بعضها البعض. على سبيل المثال ، هذه عناصر مثل <div> و <header> و <form> وغيرها من العناصر المستخدمة لإنشاء واجهات تطبيق ويب ، بما في ذلك تلك التي تعمل كحاويات للعناصر الأخرى.

يحدد تكوين قدرات العناصر، مثل <select> ، <form> ، <video> ، لتشمل في تكوينها أخرى HTML-عناصرها مثل الأطفال، وإمكانية تنظيم سلوك خاص من هذه الهياكل التي تتكون من عناصر مختلفة.

على سبيل المثال ، يحتوي عنصر <select> على وسائل لعرض عناصر <option> في شكل قائمة منسدلة تحتوي على محتويات محددة مسبقًا لعناصر مثل هذه القائمة.

ضع في اعتبارك بعض ميزات Shadow DOM المستخدمة في تكوين العناصر.

دوم الخفيفة

Light DOM هو الترميز الذي أنشأه مستخدم المكون الخاص بك. هذا DOM خارج ظل DOM للمكون وهو تابع للمكون. تخيل أنك أنشأت مكونًا مخصصًا يسمى <better-button> يوسع قدرات عنصر HTML <button> القياسي ، ويحتاج المستخدم إلى إضافة صورة وبعض النصوص إلى هذا العنصر الجديد. إليك ما يبدو عليه:

 <extended-button> <!--  img  span -  Light DOM  extended-button --> <img align="center" src="boot.png" slot="image"> <span>Launch</span> </extended-button> 

عنصر <extended-button> هو مكون مخصص موصوف من قبل المبرمج بمفرده ، ورمز HTML داخل هذا المكون هو DOM الخاص به - ما أضافه مستخدم هذا المكون إليه.

الظل DOM في هذا المثال هو المكون <extended-button> . هذا هو نموذج كائن محلي لمكون يصف هيكله الداخلي ، معزولًا عن العالم الخارجي لـ CSS ، ويغلف تفاصيل تنفيذ المكون.

دوم مسطح

تمثل شجرة DOM المسطحة كيف يعرض المستعرض المكون على الشاشة ، ويجمع بين Light DOM و Shadow DOM. إنها شجرة DOM التي يمكن رؤيتها في أدوات المطورين ، وهي التي يتم عرضها على الصفحة. قد يبدو شيء مثل هذا:

 <extended-button> #shadow-root <style>…</style> <slot name="image">   <img align="center" src="boot.png" slot="image"> </slot> <span id="container">   <slot>     <span>Launch</span>   </slot> </span> </extended-button> 

الأنماط

إذا كان عليك استخدام نفس الهياكل باستمرار في ترميز HTML لصفحات الويب ، فسيكون من المفيد استخدام قالب معين بدلاً من كتابة نفس الرمز مرارًا وتكرارًا. كان هذا ممكنًا من قبل ، ولكن الآن تم تبسيط كل شيء بشكل كبير بفضل مظهر علامة HTML <template> ، التي تتمتع بدعم ممتاز للمتصفحات الحديثة. لا يتم عرض هذا العنصر ومحتوياته في DOM ، ولكن يمكنك العمل معه من JavaScript. فكر في مثال بسيط:

 <template id="my-paragraph"> <p> Paragraph content. </p> </template> 

إذا قمت بتضمين هذا التصميم في ترميز HTML للصفحة ، فلن يظهر محتوى العلامة <p> الموصوفة عليه على الشاشة حتى يتم إرفاقه صراحة بـ DOM للمستند. على سبيل المثال ، قد يبدو مثل هذا:

 var template = document.getElementById('my-paragraph'); var templateContent = template.content; document.body.appendChild(templateContent); 

هناك وسائل أخرى لتحقيق نفس التأثير ، ولكن ، كما ذكرنا سابقًا ، تعد النماذج أداة قياسية مريحة للغاية تتمتع بدعم متصفح جيد.


دعم متصفح HTML للمتصفحات الحديثة

تعتبر القوالب مفيدة بحد ذاتها ، ولكن يتم الكشف عن إمكاناتها بالكامل عند استخدامها مع عناصر مخصصة. تعتبر العناصر المخصصة موضوعًا لمادة منفصلة ، والآن ، لفهم ما يحدث ، يكفي مراعاة أن customElement بمتصفحات customElement تتيح للمبرمج وصف علامات HTML الخاصة بهم وتحديد كيفية ظهور العناصر التي تم إنشاؤها باستخدام هذه العلامات على الشاشة.

حدد مكون ويب يستخدم قالبنا كمحتوى لظله DOM. استدعاء هذا العنصر الجديد <my-paragraph> :

 customElements.define('my-paragraph', class extends HTMLElement {  constructor() {    super();    let template = document.getElementById('my-paragraph');    let templateContent = template.content;    const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(templateContent.cloneNode(true)); } }); 

أهم شيء يجب الانتباه إليه هو إرفاق نسخة من محتويات القالب باستخدام طريقة Node.cloneNode () إلى جذر الظل.

منذ نضيف محتويات القالب إلى الظل DOM، يمكننا أن تدرج في نمط بعض المعلومات عن عنصر التصميم في <نمط> ، وهو بعد ذلك مغلفة في عضوا المخصصة. لن يعمل هذا المخطط بالكامل كما هو متوقع إذا كنت تعمل مع DOM العادي بدلاً من Shadow DOM.

على سبيل المثال ، يمكن تعديل قالب على النحو التالي من خلال تضمين معلومات النمط فيه:

 <template id="my-paragraph"> <style>   p {     color: white;     background-color: #666;     padding: 5px;   } </style> <p>Paragraph content. </p> </template> 

الآن يمكن استخدام عنصر المستخدم الموصوف من قبلنا على صفحات الويب العادية على النحو التالي:

 <my-paragraph></my-paragraph> 

فتحات

تحتوي قوالب HTML على العديد من العيوب ، أهمها أن القوالب تحتوي على ترميز ثابت ، والذي لا يسمح ، على سبيل المثال ، بعرض محتويات متغيرات معينة بمساعدتها من أجل العمل معها بنفس الطريقة التي تعمل بها مع HTML القياسي الأنماط. هذا هو المكان الذي تأتي فيه علامة <slot> .

يمكن اعتبار الفتحات كعناصر نائبة تسمح لك بتضمين شفرة HTML الخاصة بك في القالب. يسمح لك هذا بإنشاء قوالب HTML عالمية ثم جعلها قابلة للتخصيص عن طريق إضافة فتحات إليها.

ألق نظرة على الشكل الذي سيبدو عليه النموذج أعلاه باستخدام علامة <slot> :

 <template id="my-paragraph"> <p>   <slot name="my-text">Default text</slot> </p> </template> 

إذا لم يتم تحديد محتويات الفتحة عندما يتم تضمين العنصر في الترميز ، أو إذا كان المستعرض لا يدعم العمل مع الفتحات ، فإن عنصر <my-paragraph> سيتضمن فقط المحتويات القياسية Default text .

لتعيين محتويات الفتحة ، تحتاج إلى تضمين كود HTML مع سمة slot في عنصر <my-paragraph> ، التي تعادل قيمتها اسم الفتحة التي تريد وضع هذا الرمز فيها.

كما كان من قبل ، يمكن أن يكون هناك أي شيء. على سبيل المثال:

 <my-paragraph> <span slot="my-text">Let's have some different text!</span> </my-paragraph> 

العناصر التي يمكن وضعها في الفتحات تسمى عناصر Slotable .

يرجى ملاحظة أنه في المثال السابق أضفنا عنصر <span> إلى الفتحة ، فهو ما يسمى العنصر المشقوق. يحتوي على سمة slot تم تعيينها القيمة my-text ، وهي نفس القيمة المستخدمة في سمة name للفتحة الموصوفة في القالب.

بعد معالجة الترميز أعلاه ، سيقوم المتصفح بإنشاء شجرة DOM المسطحة التالية:

 <my-paragraph> #shadow-root <p>   <slot name="my-text">     <span slot="my-text">Let's have some different text!</span>   </slot> </p> </my-paragraph> 

انتبه للعنصر #shadow-root . هذا مجرد مؤشر على وجود الظل الظل.

الأسلوب

يمكن تصميم المكونات التي تستخدم تقنية Shadow DOM على أساس مشترك ، ويمكنها تحديد أنماطها الخاصة ، أو توفير خطافات في شكل خصائص CSS مخصصة تسمح لمستخدمي المكونات بتجاوز الأنماط الافتراضية.

▍ الأنماط الموضحة في المكونات

يعد عزل CSS أحد أهم ميزات تقنية Shadow DOM. وبالتحديد نتحدث عن الآتي:

• لا تؤثر محددات CSS للصفحة التي يتم وضع المكون المقابل عليها على ما بداخلها.
• لا تؤثر الأنماط الموضحة داخل المكون على الصفحة. يتم عزلهم في عنصر المضيف.

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

نلقي نظرة على البند #shadow-root ، الذي يحدد بعض أنماط:

 #shadow-root <style> #container {   background: white; } #container-items {   display: inline-flex; } </style> <div id="container"></div> <div id="container-items"></div> 

جميع الأنماط المذكورة أعلاه محلية إلى #shadow-root .

بالإضافة إلى ذلك ، يمكنك استخدام علامة <link> لتضمين أوراق أنماط خارجية في #shadow-root . وستكون هذه الأنماط محلية أيضًا.

oc فئة شبه مزيفة: مضيف

:host pseudo- تسمح لك بالوصول إلى عنصر يحتوي على شجرة ظل DOM وأنماط هذا العنصر:

 <style> :host {   display: block; /*       display: inline */ } </style> 

باستخدام الفئة :host pseudo- ، تذكر أن قواعد الصفحة الرئيسية لها أولوية أعلى من تلك المحددة في العنصر باستخدام هذه الفئة الزائفة. وهذا يسمح للمستخدمين بتجاوز أنماط مكونات المضيف المحددة من الخارج. بالإضافة إلى ذلك ، تعمل :host pseudo- فقط في سياق عنصر جذر الظل ؛ لا يمكنك استخدامه خارج شجرة الظل الظل.

يتيح لك الشكل الوظيفي للفئة الزائفة: :host(<selector>) الوصول إلى عنصر المضيف إذا كان يطابق عنصر <selector> . هذه طريقة رائعة للسماح للمكونات بتغليف السلوك الذي يستجيب لإجراءات المستخدم أو التغييرات في حالة المكون ، ويسمح لك بتصميم نمط العقد الداخلية بناءً على المكون المضيف:

 <style> :host {   opacity: 0.4; } :host(:hover) {   opacity: 1; } :host([disabled]) { /*      -  disabled. */   background: grey;   pointer-events: none;   opacity: 0.4; } :host(.pink) > #tabs {   color: pink; /*     #tabs   -  class="pink". */ } </style> 

op الموضوعات والعناصر ذات فئة زائفة: سياق المضيف (<selector>)

يتطابق: pseudo :host-context(<selector>) العنصر المضيف إذا كان هو أو أي من أسلافه يطابق عنصر <selector> .

إحدى حالات الاستخدام الشائعة لهذه الميزة هي تصميم العناصر ذات السمات. على سبيل المثال ، غالبًا ما يتم استخدام السمات من خلال تعيين الفئة المناسبة لعلامات <html> أو <body> :

 <body class="lightheme"> <custom-container> … </custom-container> </body> 

سيتم تطبيق :host-context(.lightheme) pseudo :host-context(.lightheme) على <fancy-tabs> إذا كان هذا العنصر .lightteme من .lightteme :

 :host-context(.lightheme) { color: black; background: white; } 

قد يكون بناء :host-context() مفيدًا لتطبيق السمات ، ولكن لهذا الغرض من الأفضل استخدام الخطافات باستخدام خصائص CSS المخصصة .

▍ تصميم عنصر المضيف للمكون من الخارج

يمكن تصميم عنصر المضيف للمكون خارجيًا باستخدام اسم علامته كمحدد:

 custom-container { color: red; } 

الأنماط الخارجية لها الأسبقية على الأنماط المحددة في الظل DOM.
افترض أن المستخدم قام بإنشاء المحدد التالي:

 custom-container { width: 500px; } 

ستلغي القاعدة المحددة في المكون نفسه:

 :host { width: 300px; } 

باستخدام هذا الأسلوب ، يمكنك تصميم المكون نفسه فقط. كيف تصمم البنية الداخلية للمكون؟ يتم استخدام خصائص CSS المخصصة لهذا الغرض.

hookإنشاء خطاطيف نمط باستخدام خصائص CSS المخصصة

يمكن للمستخدمين تخصيص أنماط الهياكل الداخلية للمكونات إذا قام مؤلف المكون بتزويدهم بخطافات نمطية باستخدام خصائص CSS المخصصة .

يعتمد هذا النهج على آلية مشابهة لتلك المستخدمة عند العمل مع علامات <slot> ، ولكنه ينطبق في هذه الحالة على الأنماط.

فكر في مثال:

 <!-- main page --> <style> custom-container {   margin-bottom: 60px;    - custom-container-bg: black; } </style> <custom-container background>…</custom-container> 

إليك ما بداخل شجرة الظل الظل:

 :host([background]) { background: var( - custom-container-bg, #CECECE); border-radius: 10px; padding: 10px; } 

في هذه الحالة ، يستخدم المكون اللون الأسود كلون للخلفية ، حيث أن المستخدم هو الذي حدده. خلاف ذلك ، سيكون لون الخلفية #CECECE .

بصفتك مؤلف المكون ، فأنت مسؤول عن إخبار مستخدميه عن خصائص CSS المحددة التي يمكنهم استخدامها. ضع في اعتبارك هذا الجزء من الواجهة المفتوحة للمكون الخاص بك.

JavaScript API للعمل مع الفتحات

توفر Shadow DOM API القدرة على العمل مع الفتحات.

vحدث تغيير فتحات

slotchange رفع حدث تغيير الفتحة عندما تتغير العقد الموضوعة في الفتحة. على سبيل المثال ، إذا قام المستخدم بإضافة أو إزالة العقد الفرعية في Light DOM:

 var slot = this.shadowRoot.querySelector('#some_slot'); slot.addEventListener('slotchange', function(e) { console.log('Light DOM change'); }); 

لتتبع أنواع أخرى من التغييرات في DOM ضوء، يمكنك، في العنصر منشئ، استخدم MutationObserver . اقرأ المزيد عن هذا هنا .

assigned الطريقة المعينة العقد ()

يمكن أن تكون الطريقة assignedNodes() مفيدة إذا كنت بحاجة إلى معرفة العناصر المرتبطة بالفتحة. يتيح لك استدعاء طريقة slot.assignedNodes() معرفة العناصر التي slot.assignedNodes() بالضبط. يتيح لك استخدام خيار {flatten: true} الحصول على المحتويات القياسية للفتحة (يتم عرضها إذا لم يتم إرفاق أي عقد بها).

فكر في مثال:

 <slot name='slot1'><p>Default content</p></slot> 

تخيل أن هذه الفتحة موجودة في مكون <my-container> .

دعنا نلقي نظرة على الاستخدامات المختلفة لهذا المكون ، وما الذي سيتم إرجاعه عند استدعاء الطريقة assignedNodes() .

في الحالة الأولى ، نضيف المحتوى الخاص بنا إلى الفتحة:

 <my-container> <span slot="slot1"> container text </span> </my-container> 

في هذه الحالة ، ستُرجع الاستدعاء assignedNodes() [ container text ] . لاحظ أن هذه القيمة عبارة عن صفيف من العقد.

في الحالة الثانية ، نحن لا نملأ الفتحة بالمحتوى الخاص بنا:

 <my-container> </my-container> 

ستقوم الاستدعاء assignedNodes() بإرجاع صفيف فارغ - [] .

ومع ذلك ، إذا قمت بتمرير المعلمة {flatten: true} إلى هذه الطريقة ، فإن استدعاءها للعنصر نفسه سيعرض محتواه الافتراضي: [ Default content ]

[ Default content ]

[ Default content ] .

بالإضافة إلى ذلك ، للوصول إلى عنصر داخل الفتحة ، يمكنك استدعاء assignedNodes() لإعلامك بفتحة المكون التي تم تعيين العنصر إليها.

نموذج الحدث

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

فيما يلي قائمة بالأحداث التي يتم تمريرها من شجرة الظل DOM (هذا السلوك لا يميز بعض الأحداث):

• أحداث التركيز: blur ، focus ، focus ، focus .
• أحداث الفأرة s: mousemove و mousemove و mousemove و mousemove و mousemove وغيرها.
• أحداث wheel : wheel .
• أحداث الإدخال: الإدخال beforeinput ، input .
• أحداث لوحة المفاتيح: keydown ، keyup .
• أحداث compositionstart : compositionstart ، تاريخ compositionupdate ، compositionend .
• أحداث السحب: dragstart ، drag ، drag ، drop ، وما إلى ذلك.

الأحداث المخصصة

أحداث المستخدم بشكل افتراضي لا تترك شجرة الظل DOM. إذا كنت ترغب في تشغيل حدث ما ، وتريده أن يترك Shadow DOM ، فأنت بحاجة إلى تزويده بالمعلمات bubbles: true composed: true . هكذا تبدو دعوة مثل هذا الحدث:

 var container = this.shadowRoot.querySelector('#container'); container.dispatchEvent(new Event('containerchanged', {bubbles: true, composed: true})); 

دعم متصفحات Shadow DOM

لمعرفة ما إذا كان المتصفح يدعم تقنية Shadow DOM ، يمكنك التحقق من وجود attachShadow :

 const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow; 

إليك معلومات حول كيفية دعم المتصفحات المختلفة لهذه التقنية.


دعم تقنية Shadow DOM في المتصفحات

الملخص

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

, - Shadow DOM, , , , .

أعزائي القراء! -, Shadow DOM?