ما هو Shadow DOM؟

تشرح هذه المقالة ما هو Shadow DOM۔

YouTube Video

فهم Shadow DOM

Shadow DOM هي ميزة قوية في معيار Web Components تتيح تغليف الأنماط وبنية DOM داخل المكونات۔ تمنع هذه الميزة تداخل الأنماط والسكربتات بين المكونات والمستند الرئيسي۔

ما هو Shadow DOM؟

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

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

فوائد Shadow DOM

1. التغليف: يفصل Shadow DOM بين الأنماط والوظائف، مما يمنع التعارض مع الأنماط والسكربتات العالمية۔

2. إعادة الاستخدام: يمكن إعادة استخدام المكونات المصممة باستخدام Shadow DOM عبر مشاريع مختلفة دون القلق بشأن تعارض الأنماط۔

3. سهولة الصيانة: يتيح التغليف للمكونات أن تكون مكتفية ذاتياً من حيث المنطق والأنماط، مما يجعل التصحيح والصيانة أسهل۔

إنشاء Shadow DOM

لاستخدام Shadow DOM، تحتاج إلى إرفاق جذر الظل بعنصر HTML۔ إليك مثال بسيط:۔

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

الشرح

1. عنصر المضيف: هو عنصر DOM عادي يتم إرفاق جذر الظل به (في هذه الحالة #shadow-host)۔

2. جذر الظل: هو الجذر لشجرة الظل التي يتم إنشاؤها باستخدام attachShadow۔

3. الوضع: في الوضع open، يمكن لجافاسكريبت الخارجية الوصول إلى جذر الظل عبر element.shadowRoot۔ من ناحية أخرى، لا يسمح الوضع closed بالوصول۔

التنسيق داخل Shadow DOM

لـ Shadow DOM نطاق أنماطه الخاص۔ الأنماط المحددة داخل شجرة الشادو تنطبق فقط على العناصر داخل تلك الشجرة۔ إليك مثالاً:۔

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

حتى إذا كانت هناك أنماط متضاربة في المستند الرئيسي، فإن الفقرات داخل شجرة الشادو تظل غير متأثرة:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

الفقرات داخل Shadow DOM تظل باللون الأخضر، بينما الفقرات الخارجية باللون الأحمر۔

الأحداث داخل Shadow DOM

الأحداث داخل Shadow DOM تشبه الأحداث العادية في DOM ولكنها قد تتصرف بشكل مختلف من حيث الانتشار بسبب التغليف۔ الأحداث التي تحدث داخل شجرة الشادو يمكن أن تنتقل إلى عنصر المضيف ولكنها لا تنتقل مباشرة إلى المستند بالكامل۔

إليك مثالاً:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

عند النقر على الزر، يتم تشغيل كلا المستمعين، مما يظهر سلوك انتقال الأحداث۔

الفتحات: توزيع محتوى Light DOM

تسمح الفتحات بعرض المحتوى من Light DOM داخل Shadow DOM۔ إليك مثالاً:۔

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

في المستند الرئيسي، يمكنك القيام بما يلي:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

عناصر slot داخل Shadow DOM تعرض محتوى Light DOM مع السمة slot المطابقة۔

الخاتمة

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

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video