کامپوننت‌های وب در حال کسب پشتیبانی بین مرورگرها هستند، جامعه‌ی آن‌ها به سرعت در حال رشد است و یک کاتالوگ کامپوننت وب کاملاً جدید وجود دارد تا دقیقاً کامپوننت مورد نیاز خود را پیدا کنید.
آیا تا به حال خواسته‌اید کامپوننت جاوا اسکریپت مستقل خودتان را بسازید که بتوانید به راحتی در چندین پروژه از آن استفاده کنید یا آن را با سایر توسعه‌دهندگان صرف نظر از چارچوب جاوا اسکریپتی که استفاده می‌کنند به اشتراک بگذارید؟ کامپوننت‌های وب ممکن است برای شما مناسب باشند.
کامپوننت‌های وب مجموعه‌ای از ویژگی‌های جدید پلتفرم وب هستند که به شما امکان می‌دهند عناصر HTML خود را ایجاد کنید. هر عنصر سفارشی جدید می‌تواند یک تگ سفارشی مانند <my-button> داشته باشد و تمام مزایای عناصر داخلی را داشته باشد - عناصر سفارشی می‌توانند دارای ویژگی‌ها و متدها باشند، اجرا شوند و به رویدادها پاسخ دهند و حتی دارای یک سبک کپسوله‌سازی شده و درخت‌های DOM برای ایجاد ظاهر و حس خاص خود باشند.
با ارائه یک مدل کامپوننت سطح پایین و مبتنی بر پلتفرم، کامپوننت‌های وب به شما امکان می‌دهند عناصر قابل استفاده مجدد را برای همه چیز، از دکمه‌های تخصصی گرفته تا نماهای پیچیده مانند datepickerها، بسازید و به اشتراک بگذارید. از آنجا که کامپوننت‌های وب با APIهای پلتفرم ساخته شده‌اند که شامل اصول اولیه کپسوله‌سازی قدرتمندی هستند، حتی می‌توانید از این کامپوننت‌ها در سایر کتابخانه‌ها یا چارچوب‌های جاوا اسکریپت مانند عناصر استاندارد DOM استفاده کنید.
ممکن است قبلاً در مورد کامپوننت‌های وب شنیده باشید - نسخه اولیه‌ای از مشخصات کامپوننت‌های وب - نسخه ۰ - در کروم ۳۳ ارائه شده بود.
امروزه، به لطف همکاری گسترده بین فروشندگان مرورگر، نسل بعدی مشخصات کامپوننت‌های وب - نسخه ۱ - پشتیبانی گسترده‌ای را به دست می‌آورد. کروم از دو مشخصات اصلی که کامپوننت‌های وب را تشکیل می‌دهند - Shadow DOM و Custom Elements - به ترتیب از کروم ۵۳ و کروم ۵۴ پشتیبانی می‌کند. سافاری پشتیبانی از Shadow DOM نسخه ۱ را در سافاری ۱۰ ارائه داد و پیاده‌سازی Custom Elements نسخه ۱ را در WebKit تکمیل کرده است. فایرفاکس در حال حاضر در حال توسعه Shadow DOM و Custom Elements نسخه ۱ است و Shadow DOM و Custom Elements هر دو در نقشه راه Edge قرار دارند.
برای تعریف یک عنصر سفارشی جدید با استفاده از پیاده‌سازی نسخه ۱، کافیست یک کلاس جدید ایجاد کنید که HTMLElement با استفاده از سینتکس ES6 بسط می‌دهد و آن را در مرورگر ثبت می‌کند:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
مشخصات جدید نسخه ۱ بسیار قدرتمند هستند - ما آموزش‌هایی در مورد استفاده از Custom Elements نسخه ۱ و Shadow DOM نسخه ۱ برای کمک به شما در شروع کار گردآوری کرده‌ایم.
webcomponents.org
جامعه‌ی کامپوننت‌های وب نیز به سرعت در حال رشد است. ما از دیدن راه‌اندازی سایت به‌روز شده‌ی webcomponents.org - نقطه کانونی جامعه‌ی کامپوننت‌های وب - شامل یک کاتالوگ یکپارچه برای توسعه‌دهندگان جهت به اشتراک گذاشتن عناصرشان، هیجان‌زده‌ایم.
سایت webcomponents.org حاوی اطلاعاتی در مورد مشخصات کامپوننت‌های وب، به‌روزرسانی‌ها و محتوای انجمن کامپوننت‌های وب است و مستندات مربوط به عناصر متن‌باز و مجموعه‌هایی از عناصر ساخته شده توسط سایر توسعه‌دهندگان را نمایش می‌دهد.
شما می‌توانید ساخت اولین عنصر خود را با استفاده از کتابخانه‌ای مانند Polymer گوگل شروع کنید، یا مستقیماً از APIهای سطح پایین کامپوننت وب استفاده کنید. سپس عنصر خود را در webcomponents.org منتشر کنید .
کامپوننت‌سازی خوبی داشته باشید!