Web Component ها در حال به دست آوردن پشتیبانی بین مرورگرها هستند، جامعه به سرعت در حال رشد است، و یک کاتالوگ کاملاً جدید Web Component برای یافتن دقیقاً مؤلفه مورد نیاز شما وجود دارد.
آیا تا به حال خواسته اید جزء جاوا اسکریپت مستقل خود را بسازید که بتوانید به راحتی در چندین پروژه از آن استفاده کنید یا با توسعه دهندگان دیگر بدون توجه به چارچوب جاوا اسکریپتی که استفاده می کنند به اشتراک بگذارید؟ Web Components ممکن است برای شما مناسب باشد.
اجزای وب مجموعه ای از ویژگی های جدید پلتفرم وب هستند که به شما امکان می دهند عناصر HTML خود را ایجاد کنید. هر عنصر سفارشی جدید می‌تواند یک تگ سفارشی مانند <my-button> داشته باشد و تمام خوبی‌های عناصر داخلی را داشته باشد - عناصر سفارشی می‌توانند ویژگی‌ها و روش‌هایی داشته باشند، آتش‌زنند و به رویدادها پاسخ دهند، و حتی یک سبک کپسوله‌شده و درخت‌های DOM داشته باشند. تا ظاهر و احساس خود را به همراه داشته باشند.
با ارائه یک مدل مؤلفه سطح پایین مبتنی بر پلتفرم، Web Components به شما امکان می دهد عناصر قابل استفاده مجدد را برای همه چیز از دکمه های تخصصی گرفته تا نماهای پیچیده مانند datepickers بسازید و به اشتراک بگذارید. از آنجایی که Web Component ها با API های پلتفرم ساخته شده اند که شامل موارد اولیه کپسوله سازی قدرتمند است، حتی می توانید از این مؤلفه ها در سایر کتابخانه ها یا چارچوب های جاوا اسکریپت مانند عناصر DOM استاندارد استفاده کنید.
ممکن است قبلاً درباره Web Components شنیده باشید - نسخه اولیه مشخصات Web Components - v0 - در Chrome 33 ارسال شد .
امروزه، به لطف همکاری گسترده بین فروشندگان مرورگر، نسل بعدی مشخصات Web Components - v1 - پشتیبانی گسترده ای به دست می آورد. Chrome از دو مشخصات اصلی تشکیل دهنده Web Components - Shadow DOM و Custom Elements - به ترتیب Chrome 53 و Chrome 54 پشتیبانی می کند. سافاری پشتیبانی از Shadow DOM v1 را در Safari 10 ارسال کرد و اجرای Custom Elements v1 را در WebKit کامل کرد. فایرفاکس در حال حاضر در حال توسعه Shadow DOM و Custom Elements v1 است و هر دو Shadow DOM و Custom Elements در نقشه راه Edge هستند.
برای تعریف یک عنصر سفارشی جدید با استفاده از پیاده سازی v1، شما به سادگی یک کلاس جدید ایجاد می کنید که HTMLElement با استفاده از نحو ES6 گسترش می دهد و آن را با مرورگر ثبت می کند:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
مشخصات v1 جدید بسیار قدرتمند هستند - ما آموزش های استفاده از Custom Elements v1 و Shadow DOM v1 را برای کمک به شما در شروع کار جمع آوری کرده ایم.
webcomponents.org
جامعه کامپوننت وب نیز در حال رشد است. ما از دیدن راه اندازی یک سایت webcomponents.org به روز شده - نقطه کانونی جامعه اجزای وب - از جمله یک کاتالوگ یکپارچه برای توسعه دهندگان برای به اشتراک گذاشتن عناصر خود هیجان زده هستیم.
سایت webcomponents.org حاوی اطلاعاتی درباره مشخصات ، به‌روزرسانی‌ها و محتوای Web Components از جامعه اجزای وب است و اسنادی را برای عناصر منبع باز و مجموعه‌هایی از عناصر ساخته‌شده توسط توسعه‌دهندگان دیگر نمایش می‌دهد.
می‌توانید ساخت اولین عنصر خود را با استفاده از کتابخانه‌ای مانند Google's Polymer شروع کنید، یا فقط مستقیماً از Web Component API سطح پایین استفاده کنید. سپس عنصر خود را در webcomponents.org منتشر کنید .
مولفه سازی مبارک!