איך גורמים לרכיבים מותאמים אישית להתנהג עם מאגרי מידע מוגבלים

Jayson Chen

Patrick Brosset

תאריך פרסום: 9 במרץ 2026

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

הצוות של Microsoft Edge עבד על התכונה הזו, ואנחנו שמחים לבשר שהחל מגרסה 146 של Edge ו-Chrome, וגם בדפדפנים אחרים שמבוססים על Chromium, אפשר להשתמש בברירת מחדל במאגרי רישום של רכיבים מותאמים אישית בהיקף מוגבל. עכשיו אפשר להשתמש ב-encapsulation של רכיבים מותאמים אישית, וכך לפתור בעיה שקיימת כבר זמן רב בקרב מפתחים של ספריות רכיבים ומיקרו-פרונטנד.

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

מהו רישום של רכיבים מותאמים אישית בהיקף מסוים?

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

יצירת מאגר חדש

במקום להגדיר כל רכיב מותאם אישית במאגר הגלובלי window.customElements:

1. יוצרים מאגר חדש על ידי קריאה ל-new CustomElementRegistry().
2. נותנים למאגר החדש היקף ספציפי (ראו הגדרת היקף למאגר).
3. מגדירים את הרכיבים שייכללו במרשם החדש.

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

הגדרת היקף הרישום

אפשר להגדיר את ההיקף של רישום רכיבים מותאמים אישית למסמך, ל-shadow root או לרכיב בודד.

היקף של shadow root

כדי להגדיר היקף של רישום חדש ל-shadow root, משתמשים באפשרות customElementRegistry כשקוראים לשיטה attachShadow(). כל הרכיבים המותאמים אישית שנמצאים בתוך שורש ה-shadow root ישתמשו עכשיו בהגדרה שנמצאת במאגר הרשומות התואם שמוגבל להיקף:

// Create your custom registry.
const registry = new CustomElementRegistry();
// Define a custom element in the new registry.
registry.define('my-card', class extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from scoped registry!';
  }
});

// Create shadow root, providing it with your new custom element registry.
const host = document.querySelector('#host');
const shadow = host.attachShadow({
  mode: 'open',
  customElementRegistry: registry,
});

shadow.innerHTML = '<my-card></my-card>';

Declarative shadow DOM

משתמשים במאפיין shadowrootcustomelementregistry באלמנט <template> כדי לציין לדפדפן ששורש ה-shadow שנוצר משתמש במרשם מוגבל ולא במרשם הגלובלי:

<my-host>
  <template shadowrootmode="open" shadowrootcustomelementregistry>
    <my-widget></my-widget>
  </template>
</my-host>

  const registry = new CustomElementRegistry();
  registry.define('my-widget', class extends HTMLElement {
    connectedCallback() { this.textContent = 'Scoped!'; }
  });

  const shadow = document.querySelector('my-host').shadowRoot;
  registry.initialize(shadow);

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

אפשר גם להגדיר את ההיקף של המרשם למסמך, למשל מסמך שנוצר על ידי document.implementation.createHTMLDocument(). כך אפשר לשכפל רכיבים של <template> ולבצע מניפולציות במסמכים מחוץ למסך, כשכל אחת מהפעולות האלה מתבצעת עם קבוצות מבודדות משלה של הגדרות רכיבים. כדי לעשות את זה, משתמשים ב-method‏ CustomElementRegistry.initialize():

// Create a new registry.
const registry = new CustomElementRegistry();
registry.define('app-widget', AppWidget);

// Create a document, and use registry.initialize() to scope the registry to the document.
const doc = document.implementation.createHTMLDocument('');
registry.initialize(doc);

doc.body.innerHTML = '<app-widget></app-widget>';

הגדרת היקף הרשאות לרכיב ספציפי

אפשר גם לשייך מאגר ישירות לרכיב ולעץ המשנה שלו על ידי העברת האפשרות customElementRegistry אל document.createElement(). הרכיב והצאצאים שלו יזוהו מול המרשם הזה, לא משנה באיזה חלק של ה-DOM הם יוכנסו בהמשך:

// Create a registry and define a custom element in it.
const registry = new CustomElementRegistry();
registry.define('fancy-label', FancyLabel);

// Create a new DOM element and scope the new registry to it.
const el = document.createElement('fancy-input', {
  customElementRegistry: registry,
});

// Use a custom element in the new DOM element.
el.innerHTML = '<fancy-label>Name</fancy-label>';

מידע נוסף

כדי לקבל מידע נוסף, אפשר לעיין בהדגמה (דמו) של קצה ובקוד המקור שלה, ולקרוא את המאמר בנושא CustomElementRegistry ב-MDN.

רישומים של רכיבים מותאמים אישית בהיקף מוגבל מופעלים כעת כברירת מחדל גם ב-Microsoft Edge וגם ב-Chrome, וגם בדפדפנים אחרים שמבוססים על Chromium, הודות לשיתוף הפעולה שלנו במסגרת פרויקט Chromium.

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

אם אתם רוצים שהתכונה הזו תוטמע בדפדפנים אחרים, אתם יכולים להגיב באמוג'י לייק לבעיה בנושא רישום של רכיבי HTML מותאמים אישית בהיקף מוגבל ולהוסיף תגובה עם תרחישי השימוש והפתרונות העקיפים שלכם.

אם אתם מוצאים באג בהטמעה של התכונה בדפדפן שמבוסס על Chromium, אתם יכולים לפתוח בעיה כדי שנוכל לבדוק אותה בכתובת crbug.com/new.

אנחנו מקווים שרישום של רכיבים מותאמים אישית בהיקף מוגבל יקל על השימוש ברכיבי אינטרנט.