חיפוש
  • יניב אור

כתיבת Web Components

עודכן ב: מרץ 21

אני רוצה להדגים תהליך יצירה של web component ושימוש בסיסי ברכיב כזה.

לא נעשה פה שימוש בספריות חיצוניות - יש תמיכה מובנית בדפדפנים המודרניים.

לצורך העניין, ניצור רכיב שמציג את האמוג'י 👍 ונקרא לו: thumbs-up-component.

זה יהיה שם התגית, בה נשתמש כמו בכל תגית HTML אחרת. שם תגית של רכיב מותאם באופן אישי (Custom Element), חייב להכיל מקף אמצעי (לפחות אחד) כדי שהדפדפן יבדיל בינו לבין התגיות המובנות.


thumbs-up-component.js

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


הסבר. דבר ראשון, אנחנו יוצרים אלמנט HTML בשם template אשר מכיל div ובתוכו האימוג'י.

אגב, ה-template יכול להכיל עץ DOM שלם - ובנוסף, הגדרות CSS. בהמשך.


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

הקובץ הבא שניצור:

index.html

מעטפת html5 סטנדרטית. הוספתי מספר הגדרות CSS ל-body. שני דברים אנחנו עושים כאן, טוענים את קובץ הרכיב באמצעות תגית script והדבר השני, משתמשים בתגית החדשה שנוצרה. תגית של רכיב שנוצר בקוד, חייבת להיסגר ע"י התגית המתאימה גם אם היא לא מכילה child elements. אין אפשרות לסגור אותה עם slash כמו במקרה של:


וזאת התוצאה לבינתיים:


פשוט וקל. עכשיו טיפה נרחיב ונשכלל ובהמשך נוסיף טיפולב-attributes. איך מעבירים אותם, איך מתעדכנים על שינוי וכו'.


נחזור ל-thumbs-up-component.js לחלק של ה-template.

כמו שציינתי, יש אפשרות לכתוב עץ DOM שלם ובנוסף, הגדרות CSS.


הוספתי תגית style ובתוכה הגדרות CSS.

לשים לב לשימוש ב-host: ב-style. ה-host מתייחס לאלמנט הראשי שעוטף את ה-component ובמקרה שלנו <thumbs-up-component>.

הוספתי את האלמנט label עם הכיתוב "Thumbs Up".


עכשיו זה נראה כך:


נמשיך בהעברת attributes לרכיב.

ב-thumbs-up-component.js - בחלק של ה-template - אני מוחק את "Thumbs Up" שבתוך ה-label.


ב-index.html אני מעביר attribute בשם title שמכיל את המחרוזת: "Thumbs up" לרכיב.


נחזור ל-ThumbsUpComponent, בקובץ JS. נשתמש בשתי פונקציות מובנות:

- ה-getter שנקרא observedAttributes - בה אנחנו מגדירים לאילו attributes אנחנו רוצים להאזין

- הפונקציה attributeChangedCallback שנקראת בכל פעם שיש שינוי ב-attributes שהוגדרו קודם לכן.


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


באופן כללי, עדיף את כל ה-querySelector למיניהם לעשות פעם אחת ב-constructor, לכן נאסוף ב-constructor את התגית label אל תוך משתנה.

שימו לב ב-console.log ש-this.title מכיל את ה-string שלנו. נעדכן את התוכן של התגית label ב-this.title:



יפה, עכשיו אני רוצה לשנות את התוכן של title בצורה דינמית, מחוץ ל-component. הוספתי תיבת טקסט לדף HTML הראשי (index.html) ו-event listener כך שבכל הקלדה בשדה הטקסט, ה-title ישתנה בהתאם:




הדבר הבא שאני רוצה להראות זה שימוש בתגית slot. היא מאפשרת העברה של החל מאלמנט בודד ועד עץ DOM מורכב - כילדים של ה-Custom Element שיצרנו. מאוד דומה ל-children ב-React, אם אתם מכירים. הילדים הללו לא נכללים ב-shadow dom והם נשלטים מחוץ לרכיב.


אז, נוסיף תגית slot ל-thumbs-up-component.js. לצורך העניין, מתחת ל-<div>👍</div>:


וב-index.html נוסיף תגית label עם תוכן - כילד של thumbs-up-component:


שימו לב שההגדרות CSS ל-label שנמצאות בקובץ של הרכיב לא משפיעות על הילד שהועבר דרך ה-slot למרות שגם הוא label. הגדרות שכן ישפיעו עליו יימצאו ב-index.html:




*** המשך יבוא...

© 2023 by DO IT YOURSELF. Proudly created with Wix.com