מהו Shadow DOM?

מאמר זה מסביר מהו Shadow DOM.

YouTube Video

הבנת Shadow DOM

Shadow DOM הוא תכונה חזקה של תקן רכיבי ווב שמאפשרת איקפסולציה של סגנונות ומבנה DOM בתוך רכיבים. תכונה זו מונעת התנגשות של סגנונות וסקריפטים בין רכיבים ובין מסמך ה-HTML הראשי.

מהו 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, JavaScript חיצוני יכול לגשת לשורש הצל דרך element.shadowRoot. מנגד, במצב closed לא מתאפשרת גישה.

עיצוב בתוך Shadow DOM

ל-Shadow DOM יש תחום סגנון משלו. סגנונות שהוגדרו בתוך עץ ה-shadow חלים רק על האלמנטים שבתוך העץ הזה. הנה דוגמה:.

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

גם אם יש סגנונות מתנגשים במסמך הראשי, הפסקאות בתוך עץ ה-shadow נשארות ללא שינוי:

 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, אך יכולים להתנהג בצורה שונה מבחינת התפשטות עקב הקפסולציה. אירועים שמתרחשים בתוך עץ ה-shadow יכולים לעלות כלפי מעלה עד אלמנט ההוסט, אך אינם מתפשטים ישירות למסמך כולו.

הנה דוגמה:

 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});

כאשר לוחצים על הכפתור, שני המאזינים מופעלים, ומדגימים את ההתנהגות של התפשטות אירועים כלפי מעלה.

Slots: חלוקה של תוכן Light DOM

Slots מאפשרים להקרין תוכן מ-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 Video