در اکوسیستم مدرن فرانتاند، توسعهدهندگان بهطور فزایندهای از کتابخانههای UI وابسته به فریمورکها به سمت راهحلهای استاندارد و قابلتعامل حرکت میکنند. ورود Web Components: مجموعهای از فناوریهای مختلف که به شما امکان ایجاد عناصر سفارشی قابلاستفاده مجدد را میدهد. در حالی که فریمورکهایی مانند React، Vue و Angular معماری مبتنی بر کامپوننت را محبوب کردهاند، Web Components بهصورت بومی در مرورگر اجرا میشوند و نیازی به کامپایل یا بستهبندی ندارند. در این راهنما، دو ستون اصلی Web Components—عناصر سفارشی (Custom Elements) و Shadow DOM—را بررسی کرده و یک کامپوننت کاربردی و کپسولهشده را از صفر میسازیم.
درک مفاهیم پایه
برای ساخت مؤثر Web Components، باید تفاوت بین عناصر سفارشی (Custom Elements) و Shadow DOM را درک کنید. عناصر سفارشی ستون فقرات را تشکیل میدهند و به شما امکان میدهند تگهای HTML خود را تعریف کنید (مانند <my-button>) و به چرخه عمر عنصر در مرورگر متصل شوید. Shadow DOM کپسولهسازی سبک و ساختار را فراهم میکند، تضمین میکند که سبکها و نشانهگذاری کامپوننت شما نشت نکند و تحت تأثیر بقیه صفحه قرار نگیرد.
با ترکیب این دو، ماژولاریتی واقعی را به دست میآورید. کامپوننت شما به یک واحد مستقل تبدیل میشود که میتواند در هر پروژهای، صرفنظر از فناوری پایه، قرار گیرد.
گام ۱: ایجاد کلاس عنصر سفارشی
اولین قدم ایجاد یک کلاس جاوااسکریپت است که از HTMLElement ارثبری میکند. این کلاس رفتار و چرخه عمر عنصر سفارشی شما را تعریف خواهد کرد. ما با ایجاد یک کامپوننت ساده «کارت اطلاعات» شروع میکنیم. این کامپوننت یک عنوان، یک آیکون و یک توضیح را نمایش خواهد داد.
ساختار پایه کلاس ما به شرح زیر است:
class InfoCard extends HTMLElement {
constructor() {
super();
// در گام بعدی، Shadow DOM را در اینجا متصل کنید
}
connectedCallback() {
// این روش زمانی فراخوانی میشود که کامپوننت به DOM اضافه شود
this.render();
}
}روش چرخه عمر connectedCallback حیاتی است. این روش معادل componentDidMount در React عمل میکند و نشان میدهد که عنصر اکنون بخشی از سند است و آماده رندر شدن میباشد.
گام ۲: پیادهسازی کپسولهسازی Shadow DOM
برای اطمینان از اینکه کامپوننت ما بهصورت مستقل از سند والد ظاهر و رفتار میکند، نیاز داریم یک ریشه Shadow متصل کنیم. این کار را در داخل سازنده با فراخوانی this.attachShadow() انجام میدهیم. حالت 'open' به ریشه Shadow اجازه میدهد از طریق جاوااسکریپت از خارج کامپوننت دسترسی داشته باشد که برای اشکالزدایی مفید است، هرچند 'closed' کپسولهسازی سختگیرانهتری ارائه میدهد.
class InfoCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
render() {
// سبکها و نشانهگذاری داخلی را تعریف کنید
this.shadowRoot.innerHTML = `
System Alert
This is a native Web Component.
`;
}
}به استفاده از محدودهبندی CSS توجه کنید. از آنجا که این سبکها در داخل Shadow DOM قرار دارند، بر سبکنامه جهانی تأثیر نمیگذارند و سبکهای جهانی نیز بر ساختار داخلی کامپوننت تأثیر نمیگذارند. این موضوع یکی از مشکلات پایدار در توسعه وب، یعنی تداخل سبکها را حل میکند.
گام ۳: ثبت عنصر
تعریف کلاس به تنهایی کافی نیست؛ مرورگر باید بداند که <info-card> به کلاس سفارشی ما اشاره دارد. ما از customElements.define() برای ثبت کامپوننت استفاده میکنیم. نکته مهم این است که نام عناصر سفارشی باید شامل یک خط تیره (مانند info-card) باشد تا از تداخل با عناصر HTML بومی آینده جلوگیری شود.
customElements.define('info-card', InfoCard);پس از ثبت، میتوانید از تگ <info-card></info-card> در هر جایی از بدنه HTML خود استفاده کنید. کامپوننت بهطور خودکار نمونهسازی و رندر خواهد شد.
نتیجهگیری
ساخت Web Components تنها درباره یادگیری یک API جدید نیست؛ بلکه درباره پذیرش فلسفه کد قابلاستفاده مجدد و مطابقتیافته با استانداردهاست. با بهرهگیری از عناصر سفارشی و Shadow DOM، شما اصول اولیه UI مستحکمی میسازید که مستقل از فریمورک هستند. اگرچه این مثال ساده از innerHTML برای سادگی استفاده میکند، در محیطهای تولید ممکن است بخواهید از قالبهای متنی (template literals) یا واردات HTML برای عملکرد و نگهداری بهتر استفاده کنید.
همانطور که استانداردهای مرورگر به تکامل خود ادامه میدهند، Web Components به ستون فقرات وب مدرن تبدیل میشوند. چه در حال ساخت یک سیستم طراحی، یک کتابخانه یا یک برنامه تکصفحهای باشید، تسلط بر این اصول اولیه شما را به یک توسعهدهنده فرانتاند چندوجهیتر و مؤثرتر تبدیل خواهد کرد.