CSS Encapsulation allows for scoping one’s styles to a specific component or reusable piece of code. When using component-based architecture, the developer can control how styles are applied to sections of the application. Styles can be applied to a specific component without side effects to other elements. While browsers are starting to natively support the ability to create components and scope their styles via Custom Elements created using the Shadow DOM, support is still limited.
In this blog, Martine explores the 4 ways of encapsulating styles in an angular application: Emulated, Native, ShadowDom, and None, how they work, and their differences.
Read the full blog by Andromeda CTO Martine Dowden on Pluralsight: CSS Encapsulation in Angular