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 สำหรับข้อยกเว้นที่ตั้งใจ) เป็นสิ่งสำคัญสำหรับการจัดการสไตล์ในแอปขนาดใหญ่ และสำหรับการสร้างไลบรารีคอมโพเนนต์ที่การรั่วไหลของสไตล์จะเป็นปัญหาที่ร้ายแรง