רכיבי ה-Web Components מקבלים תמיכה בדפדפנים שונים, הקהילה גדלה בקצב מסחרר ויש קטלוג חדש של רכיבי Web Components שבו אפשר למצוא בדיוק את הרכיב הדרוש לכם.
חשבתם פעם ליצור רכיב JavaScript עצמאי שתוכלו להשתמש בו בקלות במספר פרויקטים או לשתף עם מפתחים אחרים, ללא קשר למסגרת JavaScript שבה הם משתמשים? יכול להיות שרכיבי ה-Web יהיו פתרון מתאים לכם.
רכיבי אינטרנט הם קבוצה של תכונות חדשות בפלטפורמת האינטרנט שמאפשרות ליצור רכיבי HTML משלכם. לכל רכיב מותאם אישית חדש יכול להיות תג מותאם אישית כמו <my-button>, ולכל רכיב כזה יש את כל היתרונות של רכיבים מובנים – לרכיבים מותאמים אישית יכולים להיות מאפיינים ושיטות, הם יכולים להפעיל אירועים ולהגיב להם, ואפילו יכולים להיות להם עיצוב וסוגי DOM עטופים כדי להעניק להם מראה וסגנון משלהם.
Web Components מספקים מודל רכיבים ברמה נמוכה שמבוסס על פלטפורמה, ומאפשרים ליצור ולשתף אלמנטים לשימוש חוזר בכל דבר, החל מלחצנים מיוחדים ועד לתצוגות מורכבות כמו חלונות לבחירת תאריך. רכיבי Web נוצרים באמצעות ממשקי API של פלטפורמות שכוללים רכיבים בסיסיים חזקים של אנקפסולציה, כך שאפשר להשתמש ברכיבים האלה גם בספריות או בפלטפורמות אחרות של JavaScript, כאילו הם רכיבי DOM רגילים.
יכול להיות ששמעתם על Web Components בעבר – גרסה מוקדמת של מפרט Web Components – v0 – שוחררה ב-Chrome 33.
כיום, בזכות שיתוף פעולה רחב בין ספקי הדפדפנים, דור הבא של מפרט Web Components – גרסה 1 – זוכה לתמיכה רחבה. Chrome תומך בשתי המפרטים העיקריים שמרכיבים את רכיבי ה-Web – Shadow DOM ו-Custom Elements – החל מגרסה Chrome 53 וגרסה Chrome 54, בהתאמה. ב-Safari נוספה תמיכה ב-Shadow DOM v1 ב-Safari 10, והושלמה ההטמעה של Custom Elements v1 ב-WebKit. אנחנו מפתחים כרגע ב-Firefox את Shadow DOM ואת Custom Elements גרסה 1, וגם Shadow DOM וגם Custom Elements נמצאים ברשימת המטרות של Edge.
כדי להגדיר רכיב מותאם אישית חדש באמצעות ההטמעה של גרסה 1, פשוט יוצרים כיתה חדשה שמרחיבה את HTMLElement באמצעות תחביר ES6 ומרשמים אותה בדפדפן:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
המפרטים החדשים של גרסה 1 הם חזקים מאוד – כדי לעזור לכם להתחיל, הכנו מדריכים לשימוש ב-Custom Elements v1 וב-Shadow DOM v1.
webcomponents.org
גם קהילת רכיבי ה-Web הולכת וגדלה בקצב מסחרר. אנחנו שמחים להשיק את הגרסה המעודכנת של האתר webcomponents.org – מוקד הקהילה של רכיבי ה-Web – שכולל קטלוג משולב שבו מפתחים יכולים לשתף את הרכיבים שלהם.
האתר webcomponents.org מכיל מידע על specs של Web Components, עדכונים ותוכן מקהילת Web Components, ומציג תיעוד של רכיבים בקוד פתוח ושל אוספים של רכיבים שנוצרו על ידי מפתחים אחרים.
אתם יכולים להתחיל ליצור את הרכיב הראשון באמצעות ספרייה כמו Polymer של Google, או פשוט להשתמש ישירות ב-Web Component API ברמה הנמוכה. לאחר מכן מפרסמים את הרכיב ב-webcomponents.org.
שתהיה לכם עבודה מהנה עם רכיבים!