המחשה חזותית של מושגים ב-DOM של אזורים כהים

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

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

לפני כמה ימים פרסמתי כלי שעבדתי עליו בשם Shadow DOM Visualizer כדי לעזור לצמצם את עקומת הלמידה.

הוא מאפשר לראות באופן חזותי איך DOM של Shadow מעובדים בדפדפן, משהו שחסר היום בכלי הפיתוח. שתי הבלוקים של הקוד השחור שמימין ניתנים לעריכה. כדי לראות את ההשפעה של העץ המורכב (מעובד) בצד שמאל, אפשר לנסות לשנות את נקודות ההוספה של <content>, להסיר או להוסיף נקודות חדשות.

אפשר להעביר את העכבר מעל הצמתים בתרשים כדי להדגיש את תגי העיצוב הרלוונטיים מימין. יש! d3.js צמתים כחולים מגיעים מהצומת המארח. צמתים צהובים מגיעים מה-DOM של הצל. נקודות ההכנסה של <content> הן הגשר בין שני העולמות. מכיוון שהן לוגיות ב-DOM של הצל, הן נצבעות בצהוב. הגבול הכחול מציין שהוא מזמין צמתים כחולים של מארחים לתוך הצד המעבד.

DOM של צל זמין ב-Chrome בגרסה 25 והרכיב <template> זמין ב-Chrome 26 (אם כי דרושה לך רק היכולת הראשונה לנסות את ההדגמה).