‏رجیستری اسکوپ‌شده: یک اسم برای چند کامپوننت

کروم ۱۴۶ قابلیتی به اسم scoped custom element registry رو اضافه کرده که اجازه می‌ده المان‌های سفارشی رو بیرون از فضای نام رجیستری سراسری تعریف کنی. تو این مقاله اومده که فایرفاکس ۱۵۰ هم همین قابلیت رو پشت یه فلگ آزمایشی داره، پس احتمالش زیاده که جزو Baseline 2026 باشه. نکتهٔ جالب اینه که سافاری اولین مرورگر بزرگی بود که این استاندارد رو پیاده کرد.

مسئله‌ای که حل می‌کنه ساده‌ست: فرض کن دیزاین‌سیستمت یه داره و همزمان باید نسخهٔ دوم همون کامپوننت رو هم توی همون صفحه استفاده کنی. تا قبل از این، اسم تگ سراسری بود و دو تعریف با یه اسم به هم می‌خوردن. حالا می‌تونی رجیستری سراسری رو برای نسخهٔ ۱ نگه داری و برای نسخهٔ ۲ یه رجیستری جدا بسازی:

customElements.define("ds-button", v1Button);

const footerRegistry = new CustomElementRegistry();
footerRegistry.define("ds-button", v2Button);

یه راه استفاده از اون رجیستری اینه که موقع ساختن Shadow DOM بهش بگی از کدوم رجیستری استفاده کنه. اون‌وقت هر داخل اون شدو، نسخهٔ دوم می‌شه:

const shadow = footer.attachShadow({
  mode: "open",
  customElementRegistry: footerRegistry
});

ولی نویسنده می‌گه روش موردعلاقه‌اش این نیست. تو دموی منوی راست‌کلیک، هر سه المان رو با document.createElement و آپشن رجیستری ساخته، چون درست کردن یه میزبان شدو برای هر المان اسکوپ‌شده هم دردسر استایل‌دهی داره و هم با کتابخونه‌هایی جور درنمیاد که انتظار دارن المان‌ها فرزند مستقیم ریشه باشن. متد initialize(root) هم اجازه می‌ده رجیستری رو روی هر گرهٔ DOM دلخواه سوار کنی — البته فقط وقتی مقدار customElementRegistry اون المان هنوز null باشه.

نویسنده خودش قبول داره که این ویژگی حسابی نیچه‌ست، چون اصلاً خود المان‌های سفارشی کنار فریم‌ورک‌هایی مثل ری‌اکت در اقلیتن؛ ولی هر کسی با چیزی مثل Lit کار کنه عملاً کاربر همین قابلیته. اگه با تایپ‌اسکریپت ۶ یا بالاتر کار می‌کنی تعریف تایپ‌ها آماده‌ست و لازم نیست دستی چیزی بنویسی. آرزوی نویسنده هم اینه که یه نسخهٔ اعلانی (یه اتریبیوت customelementregistry روی هر عنصر) اضافه بشه تا برای light DOM هم بشه بدون جاوااسکریپت اضافه این کارو کرد.

نکات کلیدی:

• کروم ۱۴۶ رجیستری اسکوپ‌شده رو آورده، سافاری اولین پیاده‌ساز بود و توی فایرفاکس ۱۵۰ پشت فلگ فعال می‌شه
• چند کامپوننت یا چند نسخه با یه اسم تگ مشترک می‌تونن توی یه صفحه زندگی کنن
• با new CustomElementRegistry() رجیستری جدا می‌سازی و با define توش تگ ثبت می‌کنی
• سه راه استفاده: پاس دادن به attachShadow، آپشن رجیستری توی document.createElement، یا registry.initialize(root)
• initialize فقط روی المانی جواب می‌ده که رجیستری‌اش هنوز null باشه
• تایپ‌اسکریپت ۶ تایپ‌های لازم رو داره؛ نسخه‌های قدیمی‌تر تعریف دستی می‌خوان