View Encapsulation تتحكم في كيفية تحديد نطاق CSS الخاص بالمكون — بشكل افتراضي، Angular يعزل أنماط كل مكون بحيث لا تتسرب إلى مكونات أخرى أو تتأثر بها. هذا يحل مشكلة النطاق العام في CSS.
({
: ,
: ,
: [],
})
{}
في وضع Emulated الافتراضي، h2 { color: blue } لن يؤثر على <h2> في مكونات أخرى، والأنماط الخارجية لن تتسرب إلى هذا المكون.
<!-- Angular adds unique attributes to scope the styles -->
<app-card _nghost-abc>
<h2 _ngcontent-abc>Title</h2>
</app-card>
<style>h2[_ngcontent-abc] { color: blue; }</style> <!-- scoped by attribute -->
Angular تضيف تلقائياً سمات _ngcontent/_nghost الفريدة إلى عناصر المكون وتعيد كتابة محددات CSS الخاصة به ليطابق فقط — محاكاة الأنماط المحددة للنطاق دون الحاجة إلى Shadow DOM الأصلي.
ViewEncapsulation.Emulated (default) → scoped via added attributes (works everywhere)
ViewEncapsulation.ShadowDom → real browser Shadow DOM (true isolation)
ViewEncapsulation.None → NO scoping — styles are global (leak everywhere)
/* style a child component's internals from the parent */
:host { display: block; } /* the component's own host element */
:host(.active) { ... } /* host with a class */
::ng-deep .child-class { color: red; } /* pierce into children (use sparingly — deprecated-ish) */
:host تصمم عنصر جذر المكون الخاص به؛ ::ng-deep تفرض نمط للأحفاد (قوية لكن غير محبذة — تكسر encapsulation).
View Encapsulation هي السبب في أن مكونات Angular آمنة في التصميم بشكل معزول — يمكنك كتابة h2 { color: blue } في مكون واحد دون القلق من تدمير كل <h2> في التطبيق.
فهم وضع Emulated الافتراضي (والبدائل None/ShadowDom، بالإضافة إلى :host و ::ng-deep للاستثناءات المقصودة) مهم لإدارة الأنماط في التطبيقات الكبيرة وللبناء مكتبات مكونات حيث تسرب الأنماط سيكون مشكلة خطيرة.