با وجود اینکه ::ng-deep از نسخههای ابتدایی Angular بهعنوان یک راهکار برای نفوذ به سبکدهی داخل کامپوننتها معرفی شد و بعدها بهطور رسمی منسوخ (deprecated) اعلام شد، هنوز هم در بسیاری از پروژههای Angular دیده میشود. در این مقاله به دلایل ادامهدار بودن استفاده از ::ng-deep در سال ۲۰۲۵ میپردازیم و راهکارهای جایگزین را بررسی میکنیم.
۱. چیستی ::ng-deep
Angular بهصورت پیشفرض استایلهای هر کامپوننت را با مکانیزم «انکپسولاسیون» (Encapsulation) ایزوله میکند تا سبکها به بیرون از همان کامپوننت نشت نکنند. اما در مواردی که لازم باشد استایلی را از والد به فرزند یا از یک لایه کامپوننت به لایههای عمیقتر اعمال کنیم (مثلاً هنگام تغییر ظاهر کامپوننتهای شخصثالث)، دستور ::ng-deep بهعنوان یک «شکاف» (deep selector) معرفی شد تا بتوان این انکپسولاسیون را موقتاً دور زد.
/* نمونه استفاده */
:host ::ng-deep .mat-button {
background-color: #1976d2;
}
۲. چرا با وجود منسوخبودن هنوز استفاده میشود؟
۲.۱. نبود جایگزین کامل و یکپارچه
تا امروز Angular راهحل رسمی و یکسانی برای تمام حالات پیچیده استایلدهی ارائه نکرده است. ابزارهایی مثل :host، :host-context و حتی استایلهای جهانی (global styles) در برخی موقعیتها کارآمد هستند، اما در بسیاری از حالات، بهویژه وقتی با کامپوننتهای شخصثالث (مثل Angular Material یا PrimeNG) سروکار دارید، این ابزارها ناکافیاند.
۲.۲. حجم زیاد کدهای قدیمی
بسیاری از اپلیکیشنهای بزرگ و سازمانی از سالها قبل با ::ng-deep نوشته شدهاند. بازنویسی و حذف تدریجی این دستور در هزاران فایل میتواند بسیار زمانبر و پرریسک باشد و تیمها ترجیح میدهند با همان راهکار شناختهشده بهکار ادامه دهند.
۲.۳. ریسک بالا در تغییر انکپسولاسیون
برخی تیمها برای دور زدن محدودیتهای استایلدهی، کل انکپسولاسیون را با ViewEncapsulation.None غیرفعال میکنند که باعث میشود تمام استایلها بهصورت سراسری اعمال شوند. این رویکرد ریسک تداخل استایلها را افزایش میدهد و نگهداری آن دشوار است. بنابراین ::ng-deep همچنان گزینهی کمدردسرتر به نظر میرسد.
۲.۴. پشتیبانی پنهان در Angular
هرچند ::ng-deep منسوخ شده، تیم Angular هنوز آن را در هستهی فریمورک نگه داشته و حذف رسمی آن را به آینده نامعلومی موکول کرده است. همین امر توسعهدهندگان را مطمئن میسازد که فعلاً از کاربرد این دستور در پروژههایشان پشتیبانی ادامه مییابد.
---
۳. معایب استفاده مداوم از ::ng-deep
1. فنی بدهی (Technical Debt): انباشت دستورهای منسوخ در کد باعث پیچیدگی و دشواری نگهداری میشود.
2. کاهش خوانایی: ورود مکرر ::ng-deep به فایلهای CSS/SCSS باعث میشود کد استایل از اصول مدرن Angular دور شود.
3. ریسک در آینده: وقتی فرمان حذف کامل این قابلیت توسط تیم Angular صادر شود، بازنویسی یکباره بخش بزرگی از کد بههمراه ریسک خطاها خواهد بود.
---
۴. راهکارهای جایگزین
1. استفاده از CSS Variables: تعریف متغیرهای سراسری در :root و استفاده از آنها در کامپوننتهای مختلف.
2. استایلدهی از طریق API کامپوننتها: اگر کتابخانهای از شما API یا کلاسهای کمکی برای سفارشیسازی ارائه میدهد، به جای دستکاری CSS، از آن استفاده کنید.
3. Tailwind CSS یا CSS Modules: با ورود فریمورکهای جدید، میتوانید از رویکرد utility-first یا ماژولار برای جداسازی دقیق استایل بهره ببرید.
4. تغییر انکپسولاسیون به Shadow DOM: در صورت امکان، از ViewEncapsulation.ShadowDom برای جداسازی واقعی استایل استفاده کنید و با ::part و ::theme استایلهای لازم را تزریق نمایید.
---
۵. نتیجهگیری
در سال ۲۰۲۵، ::ng-deep هنوز زنده است نه به دلیل مطلوبیت فنی، بلکه به دلیل عملیاتی بودن آن در شرایط خاص و نبود جایگزین یکپارچه. با این حال، توصیه میشود برای آیندهنگری و کاهش بدهی فنی، استفاده از این دستور را به حداقل برسانید، راهکارهای مدرنتر را جایگزین کنید و در صورت ادامهی استفاده، بهخوبی مستندسازی و محدودسازی کنید.
---
نظر شما چی هست؟ هنوز در پروژههای خود از ::ng-deep استفاده میکنید؟ راهکار جایگزین شما چه بوده؟ لطفاً تجربیاتتان را به اشتراک بگذارید!
امیدوارم از این مقاله لذت ببرید و براتون مفید باشه.
اگر دوست دارید میتونید از طریق صفحه لینکدین با من در ارتباط باشید :)
موفق باشید :)
