‏Constructable Stylesheets: یه بار پارس، همه Shadow Rootها

اگه تا حالا با Lit یا Web Components کار کرده باشی، احتمالاً با یه مشکل آشنا روبرو شدی: هر بار که یه Shadow Root جدید می‌سازی، مرورگر باید استایل‌های مربوط به اون کامپوننت رو دوباره پارس کنه. این یعنی اگه هزار تا از یه کامپوننت توی صفحه داشته باشی، مرورگر هزار بار همون استایل‌ها رو پردازش می‌کنه. این دقیقاً همون جایی‌ه که Constructable Stylesheets وارد می‌شن.

Constructable Stylesheets یه API بومی مرورگره که بهت اجازه می‌ده آبجکت‌های CSSStyleSheet رو مستقیماً توی جاوااسکریپت بسازی — بدون اینکه نیازی به یه تگ style یا فایل CSS جداگانه داشته باشی. این آبجکت‌ها رو بعداً می‌تونی از طریق پراپرتی adoptedStyleSheets به هر تعداد Shadow Root (یا حتی خود document) بچسبونی.

مهم‌ترین مزیت این روش اینه که استایل‌ها فقط یه بار پارس می‌شن. مرورگر یه نمونه‌ی واحد از اون CSSStyleSheet رو نگه می‌داره و به جای کپی‌کردن، همون رو بین همه‌ی Shadow Rootها به اشتراک می‌ذاره. این باعث می‌شه مصرف حافظه به شکل قابل توجهی بیاد پایین، مخصوصاً توی اپلیکیشن‌هایی که تعداد زیادی کامپوننت تکراری دارن.

از نظر فنی، دو مفهوم اصلی هستن که باید باهاشون آشنا بشی: اول، خود Constructable Stylesheet یا همون آبجکت CSSStyleSheet که توی جاوااسکریپت می‌سازی؛ دوم، adoptedStyleSheets که یه آرایه‌ست و روی هر ShadowRoot یا document وجود داره و مشخص می‌کنه کدوم استایل‌شیت‌ها باید روی اون اعمال بشن.

Lit به صورت پیش‌فرض از این قابلیت استفاده می‌کنه. وقتی توی یه LitElement استایل تعریف می‌کنی، Lit اون رو به شکل یه Constructable Stylesheet می‌سازه و بین همه‌ی نمونه‌های اون کامپوننت به اشتراک می‌ذاره. به همین دلیله که Lit از نظر پرفورمنس نسبت به روش‌های قدیمی‌تر مثل inline style یا تگ style داخل Shadow DOM خیلی بهتر عمل می‌کنه.

این رویکرد همچنین مشکل قدیمی "style لیک" بین Shadow Rootها رو حل می‌کنه؛ چون Shadow DOM ایزولاسیون کامل داره و استایل‌های اشتراکی فقط از طریق همین مکانیزم کنترل‌شده وارد می‌شن. پس نه فقط بهتره، بلکه امن‌تر و قابل پیش‌بینی‌تره.

در نهایت، اگه داری Web Components می‌نویسی — چه با Lit چه بدون اون — دونستن نحوه‌ی کار Constructable Stylesheets و adoptedStyleSheets یه مهارت اساسیه. این API مستقیماً روی پرفورمنس، مصرف حافظه و معماری کلی کامپوننت‌هات تأثیر می‌ذاره.

نکات کلیدی:

• Constructable Stylesheets بهت اجازه می‌ده آبجکت CSSStyleSheet رو مستقیماً توی جاوااسکریپت بسازی
• با adoptedStyleSheets می‌تونی یه استایل‌شیت رو بین چندین Shadow Root به اشتراک بذاری
• استایل‌ها فقط یه بار پارس می‌شن — نه به ازای هر کامپوننت
• Lit به صورت پیش‌فرض از این قابلیت استفاده می‌کنه
• این روش هم حافظه رو بهینه می‌کنه، هم ایزولاسیون Shadow DOM رو حفظ می‌کنه
• برای اپلیکیشن‌هایی با تعداد زیادی کامپوننت تکراری، تأثیر پرفورمنس محسوس‌تره