#59 What is View Encapsulation | Understanding View Encapsulation | A Complete Angular Course

Understanding View Encapsulation in Angular

What is View Encapsulation?

• View encapsulation in Angular refers to the concept of isolating component styles so that they do not affect other components within the application. This is akin to data hiding in object-oriented programming.

• When creating a component, developers specify a selector, view template, and either styleUrls for external styles or styles for inline styles. These styles are scoped only to the specific component's view template.

• The CSS defined for a component applies exclusively to that component's view template, ensuring that styles from one component do not bleed into others. For example, styles defined in an app component will not affect child components like comp 1 or comp 2.

Importance of View Encapsulation

• In traditional CSS, rules have global scope and can inadvertently override each other across different parts of an application. Angular’s view encapsulation prevents this by ensuring that each component's CSS remains isolated.

• This isolation is crucial as it allows multiple components to coexist without style conflicts, maintaining design integrity throughout the application.

Types of View Encapsulation

• Angular provides three types of view encapsulation: Emulated (default), None, and Shadow DOM.

• Emulated: Angular adds unique attributes to HTML elements and CSS rules which help achieve encapsulation without using Shadow DOM technology directly. This method ensures that styles apply only within their respective components while still allowing for global styling if needed.

• None: No encapsulation is applied; all styles are global.

• Shadow DOM: Utilizes native browser support for shadow DOM features but may have compatibility issues with older browsers.

How Emulated View Encapsulation Works

• With emulated view encapsulation enabled, Angular automatically generates unique attributes for each HTML element within a component’s template during rendering. These attributes ensure that any specified CSS applies only to those elements with matching attributes in the same context.

• Inspecting the rendered HTML reveals these unique attributes added by Angular which differentiate between various components' elements (e.g., app component vs comp 1 vs comp 2). Each set has distinct attribute values preventing style overlap among them.

Practical Example

Angular View Encapsulation Explained

Understanding Component Attributes and Styles

• The attribute C12 is applied to the button element of component one, while scrolling reveals that it is also used for component two. Pressing enter applies this style to the button element.

• Changing the value to C11 updates the attribute for component one, which now reflects as NG content-oi-C11. Upon pressing enter, this CSS style is applied to the button element of component one.

Types of View Encapsulation in Angular

• Angular achieves view encapsulation using an emulated type by adding unique attributes to each element of a given component. This ensures styles are scoped correctly within components.

• There are three types of view encapsulation: Emulated, None, and Shadow DOM. The default behavior is emulated unless specified otherwise in the encapsulation property.

Effects of Using 'None' for View Encapsulation

• When setting view encapsulation to None, CSS styles defined for a parent component will apply globally, affecting all child components without unique attributes being added. This means all buttons across child components will share the same styling.

• After refreshing the page with no unique attributes present, it’s evident that styles are uniformly applied across all button elements in both child components due to lack of encapsulation.

Transitioning to Shadow DOM

• Moving CSS styles from a specific component file into a global style.css file results in those styles being applied universally across all components since they become global styles upon saving changes.

• By specifying Shadow DOM as the view encapsulation type in a child component (comp 2), it creates its own separate DOM structure, preventing inherited styles from affecting it while allowing app and comp 1's buttons to retain their styling.

Key Takeaways on Shadow DOM Usage