Shadow DOM – הבאטמן של HTML

אמ;לק

Shadow DOM הוא נדבך בHTML שחשוב מאוד להכיר. מעבר לעובדה שהוא מאפשר פתרונות לבעיות מסויימות בעבודה עם HTML וCSS (מתי לאחרונה רציתם להוסיף class או ID חדש לפרוייקט ישן וגדול, ולא חששתם עד עצמותיכם מקונפליקט עם שם שכבר קיים בעמוד?), זהו הבסיס לשימוש ברכיבי ווב, או בשמם הבאזזי והלועזי – Web Components.
זה מתאפשר מכיוון ש- Shadow DOM מכיל בתוכו את היכולת ליצור ולבודד DOM ועיצוב של אותו DOM מבודד.

חשוב לציין: הפוסט הבא מתייחס לShadow DOM v0, לו ישנה תמיכה רחבה יותר כרגע. עם זאת, Shadow DOM v1 מכיל בתוכו פונקציונליות גדולה יותר.

ביום ברוס ויין, בלילה Shadow DOM

אתם צודקים, האנלוגיה בין באטמן לShadow DOM היא צפוייה ולו רק בגלל השם, "DOM הצללים". ועדיין, אין מה לעשות..אני פשוט אוהב את באטמן. אגב, ידעתם ששותפי היקר נקסי הוא-הוא בעצם באטמן? אבל אל תספרו על זה לאף אחד. זה סוד!

אז מה זה בכלל Shadow DOM, הבאטמן הזה?
דמיינו שמעבר לDOM הרגיל והאהוב, קיים עוד לו DOM נוסף, DOM צללים. האלמנטים בDOM הצללים הזה עוברים את הרנדור ומופיעים לנו במסמך – עם זאת, אנחנו לא יכולים לגשת אליהם.

לא ברור? אני מסכים. בואו ננסה להדגים.

הקוד הבא יתן לנו נגן וידאו. משהו כזה בעצם:

נגן וידאו יפה ונחמד, עם כפתורי עצירה והפעלה, שליטה בעוצמת השמע והכל מעוצב מאוד נחמד וקומפקטי.
רגע, מה?! את האלמנט של הוידאו אכן אנחנו כתבנו, אבל מי כתב את יתר הדברים? מאיפה הגיעו האלמנטים האלה לכל הרוחות?
ואם יש אלמנטים בתוך אלמנט הוידאו, אני בטוח אוכל לגשת אליהם עם קצת ג'אווהסקריפט, לא?

האם בעצם מתרחש פה קסם?
התשובה היא לא ולא. זה פשוט הבאטמן שלנו, Shadow DOM.

הגיע הזמן לשלוף את סימן העטלף

כן, לא מספיק שזה רפרנס קלוש, הוא גם מתורגם לעברית ובכלל מאבד את משמעותו. ועם זאת, אין מה לעשות..אין על באטמן. וגם את אבא-באטמן אתם תאהבו!
בכל אופן, הגיע הזמן להיכנס לצללים ולחשוף את הShadow DOM המתחבא באמצעות הפנס שלנו (עיין ערך סימן העטלף!) – כלי המפתחים של Chrome.
נכנס לSettings מתוך חלון הDeveloper Tools, שמוכר יותר בתור Inspect Element. שם, תחת הכותרת Elements, נסמן וי על ההגדרה הבאה:
Show user agent shadow DOM

עכשיו, כשנעשה Inspect Element על אלמנט הוידאו שלנו, נוכל ממש לראות את האלמנטים המרכיבים אותו:

ברוכים הבאים לאזור האפל של HTML 🙂

ולמה בדיוק אני צריך את כל הכישופים האלו?

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

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

יחד עם זאת, Shadow DOM הוא סטנדרט מתגבש בעולם הווב (עם כי, יש עוד קצת דרך לעבור) אשר נותן למפתחים את היכולת ליצור ולבודד DOM ועיצוב של אותו DOM מבודד.
איך אנחנו יכולים לנצל את זה לטובתנו – בשביל זה תאלצו להמשיך לקרוא 🙂

רמאות על רמאות

טוב, אז הנה טריק קטן שחלקכם בטח מכירים (או מכירים מבלי באמת להכיר). למרות כל ההצהרות הבומבסטיות, יש חלקים מסויימים בShadow DOM הדיפולטיבי של הדפדפן עליהם ניתן להחיל חוקי CSS.
נניח למשל, שאנחנו רוצים לשחק עם הצבע של תצוגת הזמן בנגן הוידאו שלנו..מה, לא ידעתם שאפשר? קבלו!

וכמובן שיש עוד המון אלמנטים דיפולטיביים שניתן לעצב – מאופי לחיצה בפלאפונים (לרוב לחיצה בפלאפונים משאירה ריבוע כחול כזה מסביב לאלמנט, מעין פוקוס), ועד לנראות של שדות מתקדמים בטפסים.

כל אחד רוצה Shadow DOM משלו!

לפני שאלפרד העוזר החביב ומנהל האחוזה של מר ברוס ויין, מעניק לכם את הכוח ליצור DOM צללים משלכם, חשוב שנעבור בזריזות על המבנה של Shadow DOM שאנחנו יוצרים.
את הצל אנחנו מדביקים ל"אלמנט מארח". הוא יכיל בתוכו את הShadow Root, ובתוך הShadow Root ימצא התוכן שבחרנו לשים בShadow DOM שלנו.

אנצל את ההזדמנות להזכיר שכל המארק-אפ והCSS של הShadow DOM מבודדים, משמע חוקים והגדרות של המסמך לא ישפיעו על הShadow DOM, ולהפך.
וזה, הרי, כל מה שאי פעם רצינו, לא?

ליצור את הShadow DOM

מבחינת HTML, אנחנו צריכים את האלמנט המארח:

כדי ליצור את הShadowRoot, נשתמש בפונקצייה createShadowRoot():

אוקיי, באטמנים שכמותנו, אז יש לנו את הShadow Root שלנו, אבל זה לא מספיק! צריך שיהיו בו אלמנטים בשביל שהוא יהיה Shadow DOM אמיתי, לא?

נסו לעשות Inspect על דוגה החמוד שלנו ^

אבל אל תשכחו, גם כשאנחנו יוצרים את הShadow DOM בעצמנו, הוא עדיין מתחבא לו בצללים(באטמן או לא באטמן?).
לא מאמינים לי? נסו לראות מה תקבלו בפקודה הבאה:

רמז: זה מתחרז עם המילה קל..

ומה לגבי דברים גדולים יותר?

אוקיי, אז שתלנו תמונה בDOM הצללים שיצרנו בעצמנו. Yippee ki yay.
הגיע הזמן לצאת לעולם האמיתי, או במילים אחרות: בואו ננסה לעשות דברים מורכבים יותר.
בואו ניתן לדוגה החמוד שם, כי הרי מה זה שיבה-אינו בלי שם בעולם הזה?

וגם קצת סטייל:

טוב, אז הגענו לשפת הבריכה של הגדולים. מה עכשיו? איך דוחפים את כל הבלגן הזה לShadow DOM?
התשובה טמונה בתגית <template>, ולמי שלא מכיר זה בדיוק הזמן המושלם.

ועכשיו, באטמן!

שימו לב: אנחנו משתמשים בquerySelector() ו-ב importNode() מפאת האופי של <template>, שהרי גם הוא לא בדיוק אלמנט שמתרנדר למסמך.

Shadow DOM ו-SEO

מפתחים רבים צריכים להתעסק, ברמה כזו או אחרת, גם בצד הקידומי של האתר, לפחות מבחינה טכנית.
לכן נשאלת השאלה, איך הדברים בShadow DOM מתאנדקסים, ביחס לאינדוקס הרגיל של הDOM.
מכיוון שShadow DOM עדיין מוגדר כדראפט, קשה לקבוע נחרצות דברים כאלה. מה שכן אפשר להגיד זה שקודם כל, מנועי החיפוש מתמודדים מול דברים דומים בהצלחה – אתרים מבוססי AJAX כבד, למשל.
בנוסף, ישנם אתרים שכבר בנויים באמצעות Web Components, משמע מסתמכים על Shadow DOM – ומתאנדקסים טוב מאוד. bitHound הוא אחד מהם.

Shadow DOM ונגישות

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

סיכום – מShadow DOM לWeb Components

קודם כל, אתחיל בהבהרה חשובה:
הרבה מדריכים שמסתובבים באינטרנט לגבי Shadow DOM ו- Web Components הם אינם מעודכנים.
חלק מהמדריכים האלו מכלילים בדרך לWeb Components, שמתחילה בShadow DOM ובטמפלייטים, את התגיות <content> או <shadow>, על מנת להוציא את התוכן מתוך ה<template>, ולשלוט ביכולת לשנות אותו.
<content> ו- <shadow> הן תגיות שהופסקה התמיכה בהן, וההמלצה הנוכחית היא לא להשתמש בהן יותר. הן יוחלפו בעתיד על ידי התגית <slot>, תגית שמטרתה ליצוק תוכן לתוך Shadow DOM.

אז Shadow DOM זה באמת נחמד, ותמיד כיף לגעת בצדדים "אפלים" בHTML. עם זאת, חשוב לזכור שהשימוש העיקרי בShadow DOM הוא בשביל ליצור Web Components – העתיד של פיתוח הWEB.
הShadow DOM הוא הבסיס לWeb Components, אבל לא לדאוג – אני מבטיח שתקבלו גם מדריך מלא ומקיף לWeb Components! 😉

מקורות

1. דימיטרי גלזקוב – מסביר מה זה לעזאזל Shadow DOM
2. W3C – הדראפט הרשמי על Shadow DOM
3. MDN – הסבר שימוש בShadow DOM

אם אתם רוצים להיות הראשונים לדעת כשהמדריך לWeb Components מתפרסם, הירשמו פה למטה לניוזלטר, אנחנו מעריכים את זה!

Summary

Article Name

Shadow DOM - הבאטמן של HTML

Description

כל מה שצריך לדעת אודות Shadow DOM, הבסיס לבניית Web Components.

Author

שלומי זק

Publisher Name

MasterScripter

Publisher Logo