| استراتيجية العزل | طريقة التطبيق | الأثر المباشر على المتصفح |
|---|---|---|
| Emulated (الافتراضية) | توليد سمات برمجية فريدة للعناصر لمنع تسرب الأنماط | محاكاة Shadow DOM بلغة CSS عادية |
| ShadowDom | استخدام تقنية المتصفح الأصلية Shadow DOM للعزل الكامل | فصل تام للأنماط داخل حاوية مغلقة |
| None | إلغاء العزل نهائياً وجعل الأنماط عامة على مستوى التطبيق | تطبيق قواعد CSS بشكل شمولى وعام |
ننتقل في هذا الدرس إلى جانب حيوي في تصميم واجهات المستخدم داخل بيئة المكونات المستقلة (Standalone Components)، وهو كيفية تطبيق الأنماط البرمجية (CSS/SCSS) وضمان عزلها تماماً لكي لا تتداخل مع بقية أجزاء التطبيق. يوفر أنجولر أنظمة مرنة للغاية لإدارة الأنماط مع دعم كامل لأحدث معايير الويب.
يقوم إطار العمل تلقائياً بإضافة سمات فريدة (Attributes) لعناصر الـ HTML وملفات الـ CSS الخاصة بالمكون، مما يمنع الأنماط من التسرب إلى الخارج أو التأثر بملفات خارجية.
تستخدم عندما ترغب في كتابة ملفات CSS عامة تخص المكون الحالي وتؤثر على باقي عناصر الصفحة، تماماً مثل ملفات الأنماط العامة (Global Styles).
| 1 | import { Component, ViewEncapsulation } from '@angular/core'; |
| 2 | |
| 3 | @Component({ |
| 4 | selector: 'app-styled-card', |
| 5 | standalone: true, |
| 6 | template: ` |
| 7 | <div class="card-container"> |
| 8 | <h3>عنوان البطاقة المعزولة</h3> |
| 9 | <p>هذا النص يحافظ على تنسيقاته الخاصة دون تداخل.</p> |
| 10 | </div> |
| 11 | `, |
| 12 | styles: ` |
| 13 | .card-container { |
| 14 | padding: 16px; |
| 15 | border: 1px solid #ccc; |
| 16 | border-radius: 8px; |
| 17 | background-color: #f9f9f9; |
| 18 | } |
| 19 | h3 { |
| 20 | color: #007bff; |
| 21 | } |
| 22 | `, |
| 23 | encapsulation: ViewEncapsulation.Emulated |
| 24 | }) |
| 25 | export class StyledCardComponent {} |
| 1 | import { Component, ViewEncapsulation } from '@angular/core'; |
| 2 | |
| 3 | @Component({ |
| 4 | selector: 'app-global-banner', |
| 5 | standalone: true, |
| 6 | template: ` |
| 7 | <div class="global-banner"> |
| 8 | <span>تنبيه عام يؤثر على كافة عناصر الصفحة عند إلغاء العزل.</span> |
| 9 | </div> |
| 10 | `, |
| 11 | styleUrl: './global-banner.component.css', |
| 12 | encapsulation: ViewEncapsulation.None |
| 13 | }) |
| 14 | export class GlobalBannerComponent {} |