‏Slab: کتابخونهٔ Web Component بدون ظاهر برای هر فریم‌ورکی

Slab که با اسم پکیج slab-elements منتشر شده، یه کتابخونهٔ headless Web Component هست. headless یعنی کامپوننت فقط رفتار رو می‌ده و هیچ ظاهر آماده‌ای نداره. Web Component هم یعنی تگ‌های سفارشی که خود مرورگر به‌عنوان استاندارد می‌شناسه. Slab بخش‌های سخت یه کامپوننت رو انجام می‌ده: کنترل با کیبورد، مدیریت فوکوس، ARIA (یعنی برچسب‌هایی که صفحه‌خوان‌ها برای دسترس‌پذیری می‌خونن)، شرکت تو فرم‌ها و رویدادها. ظاهرش کاملاً دست خودته.

ایدهٔ اصلی سازنده‌ها اینه که «اول پلتفرم». به گفتهٔ سایت، دیالوگ Slab در اصل همون المان dialog مرورگره و سوییچش هم یه checkbox هست؛ Slab فقط چیزایی رو اضافه می‌کنه که مرورگرها خودشون ندارن. این کتابخونه روی Lit ساخته شده، تو Chromium، Firefox و WebKit تست شده و تعریف‌های TypeScript هم داره.

چون هیچ CSS ظاهری همراهش نیست، تمی وجود نداره که باهاش بجنگی. هر بخش کامپوننت رو با ::part() استایل می‌دی و هر حالتش رو با :state(). اگه بخوای می‌تونی کلاس کامپوننت رو subclass کنی و تغییرش بدی. سایت برای نشون دادن این موضوع، یه slab-switch رو با چهار CSS مختلف نشون داده، و چهار ویترین کامل هم با ظاهرهای خیلی متفاوت مثل سایبرپانک، داشبورد مالی و منوی بازی RPG ساخته که هر کدوم فقط با یه stylesheet درست شده.

استفاده‌ش هم ساده‌ست: فقط المان‌هایی که لازم داری رو import می‌کنی و مثل هر تگ دیگه‌ای تو صفحه می‌ذاری. تو React خود تگ همون کامپوننته و پکیج wrapper لازم نیست؛ رویدادها از طریق ref گرفته می‌شن. تو Vue باید با isCustomElement به کامپایلر بگی تگ‌های slab- المان سفارشی‌ان، و Svelte هم مثل بقیهٔ المان‌ها property و رویداد رو بهشون وصل می‌کنه.

سازنده‌ها روی ماندگاری تأکید دارن. چون Custom Element یه استاندارد وبه، به گفتهٔ اونا هر فریم‌ورکی که سه سال دیگه استفاده کنی، باز هم این تگ‌ها رو رندر می‌کنه. یعنی می‌شه یه بار پایهٔ Design System رو با Slab ساخت و با عوض کردن فریم‌ورک، دوباره از اول ننوشتش. مجموعه شامل ۶۰ المانه، از dialog و menu و tabs گرفته تا date picker، combobox، tree و table.

نکات کلیدی:

• اسم پکیج slab-elements هست و همراه با lit نصب می‌شه.
• ۶۰ المان داره که هر کدوم روی یه المان بومی HTML یا نقش ARIA سوار شده.
• هیچ CSS ظاهری نداره؛ استایل با ::part() و :state() یا subclass کردن انجام می‌شه.
• تو React، Vue، Svelte، Rails و HTML ساده کار می‌کنه و برای React wrapper لازم نیست.
• تو Chromium، Firefox و WebKit تست شده و تعریف‌های TypeScript داره.