«HowTo: Components» مجموعه‌ای از مؤلفه‌های وب است که الگوهای رایج واسط کاربر را پیاده‌سازی می‌کند. هدف از این پیاده‌سازی‌ها این است که منبعی آموزشی باشند. می‌توانید پیاده‌سازی مؤلفه‌های مختلف را که نظرات زیادی درباره آن‌ها داده شده است بخوانید و امیدواریم از آن‌ها یاد بگیرید. توجه داشته باشید که این‌ها صریحاً کتابخانه واسط کاربر نیستند و نباید در تولید استفاده شوند.
اجزا
<howto-checkbox>: نشان‌دهنده گزینه بولی در فرم است. رایج‌ترین نوع چارگوش انتخاب، نوع دوگانه است که به کاربر امکان می‌دهد بین دو انتخاب (انتخاب‌شده و لغو انتخاب‌شده) جابه‌جا شود.<howto-tabs>: محتوای قابل‌مشاهده را با تقسیم کردن آن به چندین پانل محدود می‌کند.<howto-tooltip>: بالاپر که اطلاعات مربوط به یک عنصر را وقتی عنصر تمرکز صفحه‌کلید را دریافت می‌کند یا موشواره روی آن نگه داشته می‌شود نمایش می‌دهد.
اهداف
هدف ما نشان دادن روال‌های مطلوب برای نوشتن مؤلفه‌های قدرتمندی است که دسترس‌پذیر، کارا، قابل‌نگهداری، و دارای سبک‌بندی آسان باشند. هر مؤلفه کاملاً مستقل است تا بتواند به‌عنوان پیاده‌سازی مرجع عمل کند.
دسترس‌پذیری
این مؤلفه‌ها به‌طور دقیق از شیوه‌های تألیف WAI ARIA پیروی می‌کنند که راهنمایی برای توضیح و نمایش ARIA، استاندارد برنامه‌های اینترنتی غنی قابل‌دسترس است. اگر با ARIA آشنا نیستید، مقدمه ما را در WebFundamentals بررسی کنید. هر مؤلفه به بخش مربوطه در «شیوه‌های تألیف» پیوند دارد. اگرچه الزامی نیست، اما توصیه می‌کنیم قبل‌از ورود به کد، بخش «شیوه‌های تألیف» را مطالعه کنید.
عملکرد
در توسعه وب، اصطلاح «عملکرد» می‌تواند برای موارد متعددی به‌کار رود. در زمینه <howto>، عملکرد بیشتر به پویانمایی‌هایی اشاره دارد که به‌طور مداوم با سرعت ۶۰ فریم در ثانیه اجرا می‌شوند، حتی در دستگاه‌های همراه.
انعطاف‌پذیری بصری
تا حد امکان، مؤلفه‌ها سبک‌بندی نمی‌شوند، به‌جز برای چیدمان یا برای نشان دادن وضعیت انتخاب‌شده یا فعال. این کار برای این است که پیاده‌سازی ازنظر بصری انعطاف‌پذیر و متمرکز باقی بماند. با صرف نکردن زمان برای تزئین، کد را فقط به آنچه برای عملکرد مؤلفه کاملاً ضروری است محدود می‌کنیم. اگر برای عملکرد مؤلفه به سبکی نیاز باشد، آن سبک با نظری علامت‌گذاری می‌شود که دلیل آن را توضیح می‌دهد.
کد قابل‌نگهداری
ازآنجایی‌که HowTo: Components یک پیاده‌سازی مرجع است، زمان بیشتری را صرف نوشتن کدهای خوانا و قابل‌فهم کردیم که به‌طور متراکم نظر داده شده‌اند.
غیرهدف‌ها
کتابخانه / چارچوب / جعبه‌ابزار باشد
مؤلفه‌های <howto> در npm، bower، یا هر پلاتفرم دیگری منتشر نمی‌شوند
چون قرار نیست در تولید استفاده شوند. برای داشتن کدی مختصر و خوانا، از میاناهای برنامه‌سازی کاربردی جاوا اسکریپت مدرن استفاده می‌کنیم و از مرورگرهای مدرنی که استانداردهای «مؤلفه‌های وب» را پیاده‌سازی می‌کنند پشتیبانی می‌کنیم. پس‌از خواندن این پیاده‌سازی‌ها، می‌توانید کد را متناسب با نیازهای خودتان تغییر دهید.
سازگار با نسخه قدیمی باشد
نباید مستقیماً به کد اعتماد کرد. اگر پیاده‌سازی بهتری پیدا شود، ممکن است و به‌احتمال زیاد پیاده‌سازی و میانای برنامه‌سازی کاربردی هر عنصری را به‌طور اساسی تغییر خواهیم داد. این یک منبع زنده است که در آن می‌توانیم روال‌های مطلوب برای ساختن میاناهای کاربر وب را هم‌رسانی، کاوش، و بحث کنیم.
کامل باشد
ما *همه *مؤلفه‌هایی را که در «شیوه‌های تألیف WAI ARIA» یافت می‌شود پیاده‌سازی نمی‌کنیم (و احتمالاً نخواهیم کرد). بااین‌حال، استفاده مجدد از اصول به‌کاررفته در دیگر مؤلفه‌های <howto> باید خوانندگان را قادر سازد تا هر مؤلفه‌ای را که وجود ندارد پیاده‌سازی کنند.