Shadow DOM הוא נושא קשה להבנה. זה פשוט מורכב. הוא מציג מושגים לא מוכרים שלא רגילים לראות באינטרנט. גבולות צל, הגדרת היקף לעיצוב, טירגוט מחדש של אירועים, נקודות הטמעה, נקודות הטמעה בצל, צמתים מארחים, צמתים מבוזרים… והרשימת המונחים הזו נמשכת עוד ועוד.
אחד הדברים המאתגרים מבחינה מושגית ב-Shadow DOM הוא האופן שבו הדפדפן מבצע עיבוד (רנדור) של המוצר הסופי (DOM). צמתים מצומת המארח מועברים באופן קסום לנקודות ההוספה של ShadowRoot, אבל מבחינה לוגית הם עדיין נשארים בצומת המארח. מוזר! לכן, בזמן הרינדור הם מופיעים כחלק מעץ הצל ולא כחלק מהמארח המקורי. האופן שבו מתבצע העיבוד הוא אחד מהחלקים המבלבלים ביותר ב-Shadow DOM.
לפני כמה ימים השקתי כלי שעליו עבדתי שנקרא Shadow DOM Visualizer, כדי לעזור לקצר את זמן הלמידה.
היא מאפשרת לראות באופן חזותי איך Shadow DOM מנוהל בדפדפן, דבר שכרגע חסר בכלי הפיתוח. אפשר לערוך את שני קטעי הקוד השחורים בצד ימין. נסו לשנות את נקודות ההוספה של <content>, להסיר או להוסיף נקודות חדשות כדי לראות איך העץ המורכב (המשויך) מושפע בצד שמאל.
מעבירים את העכבר מעל הצמתים בתרשים כדי להדגיש את הרכיב הרלוונטי בצד ימין. יישר כוח ל-d3.js! הצמתים הכחולים מגיעים מצומת המארח. הצמתים הצהובים מגיעים מ-Shadow DOM. <content> נקודות ההוספה הן הגשר בין שני העולמות. מכיוון שהן נמצאות באופן לוגי ב-Shadow DOM, הן צבועות בצהוב. הגבול הכחול שלהם מציין שהם מזמינים צמתים כחולים של מארחים לצד היצירה.
Shadow DOM זמין ב-Chrome 25 והרכיב <template> זמין ב-Chrome 26 (אבל צריך רק את הגרסה הראשונה כדי לנסות את הדמו).