این را تصور کنید: یک جزء زیبا و تعاملی برای وب سایت خود ساخته اید. این به خودی خود عالی کار می کند، اما به محض اینکه آن را به یک برنامه بزرگتر اضافه می کنید، همه چیز دیوانه می شود – سبک های شما به اجزای دیگر نشت می کند، اشکالات عجیبی ظاهر می شوند و نمی توانید ساعت ها اشکال زدایی را متوقف کنید. سرگرم کننده نیست! خوب، با Shadow DOM کارها بسیار ساده تر می شوند!
Shadow DOM یک استاندارد وب است که کپسوله‌سازی واقعی را به پلتفرم وب می‌آورد و به شما امکان می‌دهد یک درخت DOM مخفی جداگانه را به عنصری در درخت DOM معمولی متصل کنید – این درخت DOM سایه در داخل مؤلفه وب شما محصور می‌شود و سبک‌هایی که در داخل آن تعریف شده‌اند. فرار نمی کند (آنچه در وگاس اتفاق می افتد در وگاس می ماند!). من مدتی است که از React استفاده می کنم و شگفت زده شدم که با استفاده از Shadow DOM در زیر هود، اجزای React من چقدر می توانند قدرتمندتر شوند. امروز می خواهم آنچه را که تاکنون در مورد Shadow DOM آموخته ام با شما به اشتراک بگذارم.
Shadow DOM چیست؟
در ابتدایی ترین شکل خود، Shadow DOM یک بخش محدود و جدا شده از درخت DOM شما است که در آن می توانید هم سبک و هم منطق اجزای خود را کپسوله کنید. تصور کنید که به کامپوننت خود جعبه شنی خصوصی خودش را می دهید که در آن می تواند با همه اسباب بازی هایش بازی کند و اهمیتی نمی دهد که در بقیه صفحه چه اتفاقی می افتد.
چرا انقلابی است
- Style Encapsulation: استایل‌های داخل Shadow DOM به بیرون درز نمی‌کنند و استایل‌های خارج در Component نمی‌آیند.
- محصورسازی منطقی: اسکریپت ها و کنترل کننده های رویداد در Shadow DOM نیز جدا شده اند و در نتیجه تداخل کمتری ایجاد می کنند.
- قابلیت استفاده مجدد: می توانید اجزایی بسازید که واقعاً ماژولار هستند، به این معنی که بدون توجه به جایی که استفاده می شوند، یکپارچه کار می کنند.
Shadow DOM چگونه کار می کند
هنگامی که یک عنصر سفارشی ایجاد می کنید، می توانید یک Shadow DOM را به آن متصل کنید. Shadow DOM اساساً یک درخت پنهان و محصور شده از عناصر است. در اینجا نحوه کار گام به گام آورده شده است:
- یک Shadow Root ایجاد کنید: یک Shadow DOM را به عنصر سفارشی خود وصل کنید.
- اضافه کردن محتوا: HTML، CSS و جاوا اسکریپت جزء خود را در Shadow DOM بنویسید.
- کپسوله سازی در عمل: مرورگر Shadow DOM را جدا از بقیه سند ارائه می کند.
موارد استفاده در دنیای واقعی
طراحی ابزارک های شخص ثالث
تصور کنید ویجت چت شخص ثالثی دارید که می خواهید آن را در سایت خود جاسازی کنید. اگر Shadow DOM ندارید، ممکن است CSS جهانی وب سایت شما به طور ناخواسته با سبک های ویجت تداخل داشته باشد یا آن را لغو کند. اگر Shadow DOM دارید، سبک‌های ویجت کپسوله شده و از بقیه سبک‌های وب‌سایت شما جدا می‌شوند که ظاهری ثابت را تضمین می‌کند.
ساخت اجزای رابط کاربری قابل استفاده مجدد
مورد استفاده محبوب برای ساخت اجزای قابل استفاده مجدد مانند مدال ها، کرکره ها یا چرخ فلک ها. Shadow DOM مطمئن می شود که این اجزا در هر کجا که استفاده می شوند کار می کنند و یکسان به نظر می رسند.
شما می توانید یک کامپوننت سفارشی با انیمیشن ها و سبک های خاص ایجاد کنید و در تمام صفحات برنامه شما یکسان به نظر می رسد و کار می کند، CSS جهانی روی آن تاثیری نخواهد داشت.
تم سفارشی
شما می توانید با استفاده از Shadow DOM کامپوننت های تم دار ایجاد کنید و متغیرها را از طریق ویژگی های سفارشی CSS در معرض دید قرار دهید.
مثال:
یک سیستم طراحی برای کل شرکت دارای مولفه است، بنابراین توسعه دهندگان می توانند با ارسال ویژگی های سفارشی مانند -رنگ اصلی بدون شکستن کپسوله شدن جزء، آن را موضوع بندی کنند.
نحوه استفاده از Shadow DOM
در اینجا یک مثال ساده از ایجاد یک کامپوننت وب با Shadow DOM آورده شده است:
مرحله 1: یک عنصر سفارشی را تعریف کنید
مرحله 2: از Component استفاده کنید
نکاتی برای اشکال زدایی Shadow DOM
از ابزارهای توسعه دهنده مرورگر استفاده کنید: اکثر مرورگرهای مدرن توانایی بازرسی عناصر Shadow DOM را دارند. در کروم می توانید گره Shadow Root را در تب Elements گسترش دهید.
اسلات های اهرمی: از عناصر برای ارسال محتوا به اجزای Shadow DOM استفاده کنید، این کار باعث می شود تا آنها بسیار انعطاف پذیرتر شوند.
ویژگی های سفارشی: از متغیرهای CSS استفاده کنید تا استایل های خود را قابل تنظیم تر کنید و بقیه استایل ها را محصور کنید.
مزایای استفاده از Shadow DOM
کپسولاسیون: سبک را افشا نکنید و در مورد رفتارش قابل دفاع نکنید.
قابلیت استفاده مجدد: اجزایی ایجاد کنید که به راحتی قابل جابجایی هستند و به فضای جهانی وابسته نیستند.
سهولت در تعمیر و نگهداری: سبک ها و منطق مجزا اشکال زدایی و به روز رسانی را آسان تر می کند.
چالش های Shadow DOM
پشتیبانی مرورگر: Shadow DOM در تمام مرورگرهای مدرن پشتیبانی می شود. اما برای مرورگرهای قدیمی ممکن است به پلی فیل نیاز داشته باشید.
منحنی یادگیری: درک Shadow DOM و عناصر سفارشی برای مبتدیان آسان نیست.
سازگاری با ابزار: برخی از ابزارها ممکن است در حال حاضر به خوبی با Shadow DOM کار نکنند و به راه‌حل‌هایی نیاز دارند.
نتیجه گیری:
Shadow DOM بیش از یک ویژگی فنی است، این ابزاری است که توسعه‌دهندگان می‌توانند از آن برای ساخت اجزای وب مقیاس‌پذیر، قابل نگهداری و قابل اعتماد استفاده کنند. با کپسوله‌سازی زیبای سبک‌ها و منطق، اجزای شما همیشه در هر کجا که قرار می‌گیرند یا استفاده می‌شوند خارج از جعبه کار می‌کنند.
چه در حال طراحی ویجت های شخص ثالث باشید، چه در حال ساختن یک سیستم طراحی باشید یا فقط انگشتان پا را در حوضچه اجزای وب فرو کنید… Shadow DOM به شما امکان می دهد جادو کنید. پس چرا از آن بهره نمی بریم؟ کوچک شروع کنید، تکرار کنید و این جادوی پنهانی را که می تواند کار شما را ارتقا دهد، در آغوش بگیرید!
به ساختن وب ادامه دهید. یک جزء به درستی کپسوله شده در یک زمان!
