היתרון של רכיבי אינטרנט הוא השימוש החוזר שלהם: אפשר ליצור ווידג'ט בממשק המשתמש פעם אחת, ולעשות בו שימוש חוזר. בזמן ש צריכים JavaScript כדי ליצור רכיבי אינטרנט, אין צורך בספריית JavaScript. HTML וממשקי ה-API המשויכים מספקים את כל מה שאתם צריכים.
תקן רכיב האינטרנט מורכב משלושה חלקים: תבניות HTML, Custom Elements ואת Shadow DOM. יחד, הם מאפשרים לבנות רכיבים מותאמים אישית שעומדים בפני עצמם (מוסתרים) לשימוש חוזר, וניתן לשלב אותם בצורה חלקה. באפליקציות קיימות, כמו כל רכיבי HTML אחרים שכבר עסקנו.
בקטע הזה ניצור את הרכיב
נדון בשימוש ברכיבים ו-slot וב-JavaScript כדי ליצור תבנית עם
Shadow DOM סגור. לאחר מכן נשתמש שוב ברכיב המוגדר, נבצע התאמה אישית של קטע טקסט,
כמו כל רכיב או רכיב אינטרנט. בנוסף, נדון בקצרה על השימוש ב-CSS מתוך האלמנט המותאם אישית ומחוצה לו.
הרכיב
הרכיב משמש להצהרה על שכפול של קטעי HTML והוספתם ל-DOM באמצעות JavaScript. התוכן של הרכיב לא מעובד כברירת מחדל. במקום זאת, הם נוצרים באמצעות JavaScript.
התוכן של הרכיב לא נכתב במסך, ולכן הנכס והתוכן שלו לא עוברים רינדור.
כן, ה-Codepen הזה ריק, אבל אם בודקים את כרטיסיית ה-HTML, רואים את תגי העיצוב .
בדוגמה הזו, הוא לא צאצא של ב-DOM. במקום זאת, התוכן של רכיבי הוא ילדים
מתוך DocumentFragment שהוחזר על ידי HTMLTemplateElement.content
לנכס. כדי שהתוכן יהיה גלוי, יש להשתמש ב-JavaScript כדי לשלוף את התוכן ולצרף אותו ל-DOM.
ה-JavaScript הקצר הזה לא יצר רכיב מותאם אישית. במקום זאת, הדוגמה הזו צירפה את התוכן של ל-.
התוכן הפך לחלק מה-DOM הגלוי והסגנון.
דרישה מ-JavaScript להטמעת תבנית עבור דירוג כוכבים אחד בלבד אינה שימושית מאוד, אבל יצירת רכיב אינטרנט עבור ווידג'ט של דירוג כוכבים בשימוש חוזר, שניתן להתאמה אישית.
הרכיב
אנחנו כוללים משבצת כדי לכלול מקרא מותאם אישית לכל אירוע. קוד ה-HTML מספק , אם מזינים שם, נוצר 'משבצת עם שם'. אפשר להשתמש במשבצת עם שם
כדי להתאים אישית תוכן בתוך רכיב אינטרנט. הרכיב
בתבנית שלנו, אנחנו משנים את ל-
המאפיין name משמש להקצאת יחידות קיבולת (Slot) לרכיבים אחרים אם לרכיב יש מאפיין משבצת שהערך שלו תואם ל-
של משבצת זמן עם שם. אם לרכיב המותאם אישית אין התאמה למשבצת, התוכן של עם תוכן גנרי שאפשר לעבד אם מישהו כולל את
Is this text visible?
המאפיין משבצת הוא מאפיין גלובלי שנעשה בו שימוש
כדי להחליף את התוכן של . ברכיב המותאם אישית שלנו, הרכיב עם המאפיין משבצת
הוא . זו לא חובה. בתבנית שלנו, הערך
רכיבים לא מוגדרים
ב- השתמשנו ברכיב , לא הופעל סוכן משתמש ברכיבים
לתשומת ליבך, והתוכן לא עוברים רינדור. הוא רכיב ידוע שמכיל תוכן
לא מיועד לעיבוד. הרכיב ב במקום זאת.
נגדיר את הרכיב שלנו כדי להמיר את הרכיב הלא מזוהה הזה לרכיב מותאם אישית.
רכיבים מותאמים אישית
JavaScript נדרש כדי להגדיר רכיבים מותאמים אישית. לאחר ההגדרה, התוכן של הרכיב slot שלו תואם לערך השם של
תוכן בתוך רכיב מותאם אישית שאינו משויך למיקום — Is this text visible?
אנחנו מגדירים את הרכיב המותאם אישית בשם star-rating
על ידי הרחבה של HTMLElement:
customElements.define('star-rating',
class extends HTMLElement {
constructor() {
super(); // Always call super first in constructor
const starRating = document.getElementById('star-rating-template').content;
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(starRating.cloneNode(true));
}
});
עכשיו, אחרי שהרכיב מוגדר, בכל פעם שהדפדפן ייתקל ברכיב #star-rating-template, שהוא התבנית שלנו. הדפדפן יצרף עץ DOM צללים לצומת, בצירוף
שכפול של תוכן התבנית ל-DOM של הצללית הזו.
חשוב לשים לב שהרכיבים שבהם אפשר attachShadow() הם מוגבלים.
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(starRating.cloneNode(true));
אם תסתכלו בכלים למפתחים, תוכלו לראות שה- מ- הוא חלק משורש הצללית של כל רכיב מותאם אישית.
אפשר לראות שכפול של התוכן מ- בכל רכיב מותאם אישית בכלים למפתחים, אבל הוא מופיע בדפדפן
של הרכיב המותאם אישית עצמו לא מעובדים במסך.
בדוגמה , הוספנו את תוכן התבנית לגוף המסמך, וכך הוספנו את התוכן ל-DOM הרגיל.
בהגדרה customElements, השתמשנו באותה
appendChild(), אבל תוכן התבנית המשוכפלת צורף
DOM של צללית בתוך הארגון.
שמת לב איך הכוכבים חזרו להיות לחצני בחירה לא מעוצבים? מכיוון שהיא חלק מ-DOM של צללית ולא מ-DOM הרגיל, העיצוב בכרטיסיית CSS של Codepen לא רלוונטי. שירות ה-CSS של הכרטיסייה הזו סגנונות מוגדרים למסמך, לא ל-DOM של הצללית, כך שהסגנונות לא מוחלים. אנחנו צריכים ליצור מקודדים כדי לעצב את התוכן המוסתר של Shadow DOM.
DOM של הצללה
השדה של Shadow DOM מגדיר היקף של סגנונות CSS לכל עץ צלל, ומבודד אותו משאר המסמך. כלומר שירות CSS חיצוני לא רלוונטי לרכיב שלך, ולסגנונות של הרכיבים אין השפעה על שאר המסמך, אלא אם אנחנו עושים זאת באופן מכוון להפנות אותו אליהם.
מכיוון שצירפנו את התוכן ל-DOM של צל, נוכל לכלול רכיב רכיבי אינטרנט מכוסים באמצעות תגי עיצוב וסגנונות CSS בתוך אפשר, אבל לא פשוט, לעצב את המסמך מתוך DOM של צל ולעצב את התוכן של DOM של צל
את הסגנונות הגלובליים. ניתן לעבור את גבולות הצללית, המקום שבו מסתיימת ה-DOM של הצללה וה-DOM הרגיל מתחיל, אבל רק
באופן מכוון. עץ הצללים הוא עץ ה-DOM שבתוך DOM של הצללות. שורש הצל הוא צומת השורש של עץ הצל. המחלקה המדומה הרכיב כדי לטרגט DOM של צללית מ-CSS בהיקף הגלובלי, צריך לערוך את התבנית. אם תגי העיצוב של התבנית שלנו מתחילים כך: נוכל לטרגט את שמות חלקים פועלים באופן דומה למחלקות: רכיב יכול להיות בעל שמות חלקים המופרדים ברווחים, ויכול להיות שרכיבים מרובים
הם בעלי שם חלק זהה. ל-Google יש רשימת משימות מעולה ליצירת רכיבים מותאמים אישית. עוד נושאים שאולי יעניינו אותך
על DOMs הצהרתיים של צללים. בוחנים את הידע שלכם לגבי תבנית, משבצת וצל. כברירת מחדל, סגנונות שמחוץ ל-DOM של הצללית יגרמו לסגנון של הרכיבים הפנימיים. איזו תשובה היא תיאור נכון של הרכיב
, בהיקף של DOM צללים ומוסתרים.
מכל מה שמחוץ לרכיבים, תוכן מיקומי המשבצות שמעובד, העיצוב לא כלול בהיקף הנוכחי
:host בוחרת את :host().
הפעולה הזו תבחר רק את רכיבי מארח הצללית שתואמים לפרמטר שהועבר, כמו מחלקה או בורר מאפיינים. כדי לבחור
את כל הרכיבים המותאמים אישית, תוכלו להשתמש ב-star-rating { /* styles */ } ב-CSS הגלובלי או ב-:host(:not(#nonExistantId)) בסגנונות התבנית. במונחים
ספציפיות, שירות ה-CSS הגלובלי מנצח.::slotted() חוצה את גבול ה-DOM של הצל
מתוך ה-DOM של הצל. תתבצע בחירה של רכיב מחורר אם הוא תואם לסלקטור. בדוגמה שלנו, ::slotted(legend) תואם לשלושת המקראים שלנו.part
לכל רכיב שרוצים לעצב. לאחר מכן משתמשים ברכיב המדומה ::part()
כדי להתאים רכיבים בתוך עץ צללים שתואמים לפרמטר שעבר. רכיב העוגן או רכיב המקור של הרכיב המדומה הוא
המארח, או שם הרכיב המותאם אישית, במקרה הזה star-rating. הפרמטר הוא הערך של המאפיין part.
ואת באמצעות:star-rating::part(formPart) { /* styles */ }
star-rating::part(fieldsetPart) { /* styles */ }
בדיקת ההבנה
?