Τι είναι View Encapsulation στο Angular;

Question

Accepted Answer

**View Encapsulation** ελέγχει τον τρόπο καθορισμού του εύρους του CSS ενός στοιχείου — από προεπιλογή, το Angular **απομονώνει τα στυλ κάθε στοιχείου** ώστε να μην διαρρέουν ή να μην επηρεάζονται από άλλα στοιχεία. Αυτό επιλύει το πρόβλημα του παγκόσμιου εύρους του CSS. ## Η προεπιλογή: Emulated encapsulation ```ts @Component({ selector: "app-card", template: `

Title

`, styles: [`h2 { color: blue; }`], // ONLY affects this component's

// encapsulation: ViewEncapsulation.Emulated (the default — no need to specify) }) export class CardComponent {} ``` Με την προεπιλεγμένη λειτουργία `Emulated`, αυτό το `h2 { color: blue }` δεν θα επηρεάσει τα `

` σε άλλα στοιχεία, και τα εξωτερικά στυλ δεν θα διαρρεύσουν σε αυτό. ## Πώς λειτουργεί το Emulated κάτω από την κουκούλα ```html
Title
``` Το Angular προσθέτει αυτόματα μοναδικά χαρακτηριστικά `_ngcontent`/`_nghost` στα στοιχεία του στοιχείου και ξαναγράφει τους επιλογείς CSS του για να ταιριάσουν μόνο με αυτά — προσομοιώνει στυλ εύρους χωρίς να χρειάζεται το εγγενές Shadow DOM. ## Οι τρεις λειτουργίες ```text 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) ``` ## Διάτρηση encapsulation όταν χρειάζεται ```css /* 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 }` σε ένα στοιχείο χωρίς να ανησυχείς ότι θα καταστρέψεις κάθε `

` στην εφαρμογή. Η κατανόηση της προεπιλεγμένης λειτουργίας `Emulated` (και των εναλλακτικών `None`/`ShadowDom`, καθώς και `:host` και `::ng-deep` για σκόπιμες εξαιρέσεις) είναι σημαντική για τη διαχείριση στυλ σε μεγάλες εφαρμογές και για τη δημιουργία βιβλιοθηκών στοιχείων όπου η διαρροή στυλ θα ήταν σοβαρό πρόβλημα.