Web Components v1 – הדור הבא

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

Taylor Savage
Taylor Savage

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

רכיבי אינטרנט הם קבוצה של תכונות חדשות של פלטפורמת האינטרנט שמאפשרות ליצור רכיבי HTML משלכם. לכל רכיב מותאם אישית חדש יכול להיות תג מותאם אישית כמו <my-button>, והוא כולל את כל היתרונות של הרכיבים המובנים – רכיבים מותאמים אישית יכולים לכלול מאפיינים ושיטות, להפעיל אירועים ולהגיב אליהם. אפשר גם לבחור סגנון מקיף ועצי DOM שמשולבים בהם מראה ותחושה משלהם.

אנימציה של אלמנט התקדמות נייר.

רכיבי האינטרנט מאפשרים ליצור מודל רכיבים ברמה נמוכה ומבוסס-פלטפורמה, וכך ליצור ולשתף רכיבים לשימוש חוזר, מלחצנים מיוחדים ועד תצוגות מורכבות כמו בוחרי תאריכים. רכיבי Web Component נבנו עם ממשקי API של הפלטפורמה, שכוללים פרימיטיבים של אנקפסולציה חזקים, כך שאפשר להשתמש בהם גם בספריות או ב-frameworks אחרות של JavaScript, כאילו הם רכיבי DOM סטנדרטיים.

אולי שמעתם על המונח Web Components (רכיבי אינטרנט) – גרסה מוקדמת של המפרט של רכיבי האינטרנט (גרסה 0) נשלחה ב-Chrome 33.

כיום, הודות לשיתוף פעולה נרחב בין ספקי דפדפנים, הדור הבא של מפרט רכיבי האינטרנט - גרסה 1 - מקבל תמיכה רחבה. Chrome תומך בשני המפרטים העיקריים שמרכיבים את רכיבי האינטרנט – Shadow DOM ו-Custom Elements - החל מ-Chrome 53 ומ-Chrome 54 בהתאמה. Safari שלח תמיכה ב-Shadow DOM v1 ב-Safari 10, והשלים את ההטמעה של Custom Elements v1 ב-WebKit. Firefox מפתח כרגע את Shadow DOM ואת Custom Elements v1, ו-Shadow DOM ו-Custom Elements מופיעים במפת הדרכים של Edge.

כדי להגדיר רכיב מותאם אישית חדש באמצעות הטמעת v1, פשוט יוצרים מחלקה חדשה המשתרעת על HTMLElement באמצעות תחביר ES6 ורושמים אותה בדפדפן:

class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

המפרטים החדשים של גרסה 1 הם עוצמתיים במיוחד – ריכזנו כאן מדריכים לשימוש ב-Custom Elements v1 וב-Shadow DOM v1 כדי לעזור לכם להתחיל.

webcomponents.org

גם קהילת רכיבי האינטרנט ממשיכה לגדול בצעדי ענק. אנחנו שמחים לראות את ההשקה של אתר webcomponents.org מעודכן – הנושא המרכזי של קהילת רכיבי האינטרנט – כולל קטלוג משולב למפתחים שבו הם יכולים לשתף את הרכיבים שלהם.

webcomponents.org

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

תוכלו להתחיל לבנות את הרכיב הראשון באמצעות ספרייה כמו Polymer של Google, או פשוט להשתמש ישירות ב-Web Component API ברמה הנמוכה. לאחר מכן מפרסמים את הרכיב באתר webcomponents.org.

בהצלחה!