לדלג לתוכן

מה זה Web Components

מי שעובד עם ריאקט או פריימוורק אחר מכיר את הרעיון של רכיב (component) - חתיכת ממשק עצמאית עם הלוגיקה והעיצוב שלה, שאפשר להשתמש בה שוב ושוב. Web Components הם בעצם אותו רעיון, אבל כתקן מובנה בדפדפן עצמו, בלי צורך בשום פריימוורק.

שלושת האבנים שמרכיבות Web Components

  • אלמנטים מותאמים אישית - Custom Elements. מאפשרים להגדיר תגית HTML חדשה, למשל , עם ההתנהגות שאתם מגדירים לה בקוד JavaScript.
  • DOM מוצל - Shadow DOM. נותן לרכיב "בועה" משלו - עץ DOM וסגנון CSS מבודדים משאר הדף, כך שהסגנונות שלכם לא דולפים החוצה והסגנונות של הדף לא דולפים פנימה.
  • תבניות HTML - HTML Templates. תגית template מאפשרת להגדיר קטע HTML שלא מוצג עד שמשכפלים אותו בקוד, שימושי ליצירת מבנה חוזר לרכיב.

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

דוגמה בסיסית

class UserCard extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = `
      <style>
        div { border: 1px solid #ccc; padding: 8px; }
      </style>
      <div>שלום, ${this.getAttribute("name")}</div>
    `;
  }
}

customElements.define("user-card", UserCard);

אחרי הרישום הזה, אפשר להשתמש בתגית בכל מקום ב-HTML, בדיוק כמו כל תגית מובנית אחרת.

למה בכלל צריך את זה כשיש ריאקט

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

  • מערכות עיצוב (Design Systems) ארגוניות. כשארגון גדול רוצה רכיב שיעבוד באותה צורה בכל הצוותים, גם אם כל צוות משתמש בפריימוורק אחר.
  • ווידג'טים חיצוניים. רכיב שמפיצים ללקוחות חיצוניים כדי להטמיע באתר שלהם, בלי לדעת מראש איזו טכנולוגיה הם משתמשים בה.
  • בידוד סגנון אמיתי. כשחשוב שה-CSS של רכיב לא יתנגש עם שום דבר אחר בדף, ה-Shadow DOM נותן בידוד ברמת הדפדפן, לא רק מוסכמה בקוד.

החסרונות שכדאי להכיר

Web Components לא מחליפים את ריאקט או פריימוורקים דומים ברוב האפליקציות היומיומיות. ניהול state מורכב, ניתוב (routing), ואקוסיסטם עשיר של כלים - כל אלה עדיין נוחים יותר בפריימוורק מלא. כתיבת Web Components גם דורשת יותר קוד "ידני" לדברים שפריימוורקים נותנים כברירת מחדל, כמו עדכון תגובתי של הממשק כשמידע משתנה.

תמיכת דפדפנים

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

שילוב עם ריאקט ופריימוורקים אחרים

אפשר להטמיע Web Components בתוך אפליקציית ריאקט קיימת, ולהפך - להשתמש ברכיב ריאקט בתוך Web Component. השילוב הזה שימושי במיוחד בתקופת מעבר בין טכנולוגיות, כשארגון רוצה לשמר רכיבים ישנים בזמן שהוא בונה חלקים חדשים בפריימוורק אחר, בלי לכתוב הכל מחדש בבת אחת.

מאיפה ממשיכים ללמוד

הבנת Web Components מעמיקה את ההבנה של איך הדפדפן עובד מתחת למכסה המנוע, גם אם בפועל תעבדו הרבה עם פריימוורקים. אם אתם בונים את הבסיס שלכם ב-JavaScript ו-HTML, יש לנו קורס צד לקוח בחינם שמלמד את היסודות האלה לעומק.

לסיכום

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

יש לכם שאלה על Shadow DOM או Custom Elements? שאלו בקהילה.

הצטרפו לקהילה בדיסקורד