Component styles and encapsulation in Angular - Step-by-Step Execution

Concept Flow - Component styles and encapsulation

Define component with styles

↓

Choose encapsulation mode

↓

Emulated

↓

Styles scoped

↓

Render component with styles applied

This flow shows how Angular applies styles to a component based on the chosen encapsulation mode, controlling style scope and isolation.

Execution Sample

Angular

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-box',
  template: `<div class='box'>Hello</div>`,
  styles: [`.box { color: red; }`],
  encapsulation: ViewEncapsulation.Emulated
})
export class BoxComponent {}

Defines a component with red text style scoped using Emulated encapsulation.

Execution Table

Step	Action	Encapsulation Mode	Style Scope	Effect on DOM
1	Component defined with styles	Emulated	Scoped to component	Styles get unique attribute selectors
2	Component rendered	Emulated	Scoped to component	DOM elements get unique attribute, styles apply only here
3	Change encapsulation to ShadowDom	ShadowDom	Native shadow root	Component uses shadow DOM, styles isolated natively
4	Component rendered	ShadowDom	Native shadow root	Styles apply inside shadow root, no leakage
5	Change encapsulation to None	None	Global	Styles are global, affect all matching elements
6	Component rendered	None	Global	Styles apply globally, no isolation
7	End	-	-	No further style application changes

💡 All encapsulation modes demonstrated; rendering stops after showing style application effects.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
encapsulation	undefined	Emulated	ShadowDom	None	None
styleScope	undefined	Scoped to component	Native shadow root	Global	Global
domEffect	undefined	Unique attribute selectors	Shadow DOM isolation	Global styles	Global styles

Key Moments - 3 Insights

Why do styles not leak outside the component with Emulated encapsulation?

Because Angular adds unique attribute selectors to component elements and styles (see execution_table step 2), limiting styles to that component only.

What happens if encapsulation is set to None?

Styles become global and affect all matching elements in the app, not just the component (see execution_table step 6).

How does ShadowDom encapsulation isolate styles?

It uses the browser's native shadow DOM feature to create a separate DOM tree with its own styles, preventing leakage (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What style scope is applied when encapsulation is Emulated?

A Global styles applied to all elements

B Native shadow root isolation

C Scoped to component with unique attribute selectors

D No styles applied

💡 Hint

Check the 'Style Scope' column at step 2 in execution_table.

At which step does the component use native shadow DOM for style encapsulation?

A Step 3

B Step 5

C Step 1

D Step 6

💡 Hint

Look at the 'Encapsulation Mode' column in execution_table for ShadowDom.

If encapsulation changes from Emulated to None, how does the 'domEffect' variable change in variable_tracker?

A From 'Shadow DOM isolation' to 'Global styles'

B From 'Unique attribute selectors' to 'Global styles'

C From 'Global styles' to 'Unique attribute selectors'

D No change

💡 Hint

Check 'domEffect' row in variable_tracker from After Step 1 to After Step 5.

Concept Snapshot

Angular component styles can be scoped using encapsulation modes:
- Emulated (default): styles scoped with unique attributes
- ShadowDom: uses native shadow DOM for isolation
- None: styles are global
Choose encapsulation in @Component decorator with 'encapsulation' property.
Encapsulation controls style leakage and isolation.

Full Transcript

This visual execution shows how Angular applies styles to components using different encapsulation modes. First, a component is defined with styles and Emulated encapsulation, which scopes styles by adding unique attributes to elements and styles. When rendered, styles apply only inside the component. Changing encapsulation to ShadowDom uses the browser's native shadow DOM, isolating styles inside a shadow root. With None, styles become global and affect all matching elements in the app. Variables like encapsulation mode, style scope, and DOM effect change accordingly. Key moments clarify why styles don't leak in Emulated mode, what happens with None, and how ShadowDom isolates styles natively. The quizzes test understanding of style scope, shadow DOM usage, and variable changes. This helps beginners see how Angular controls component style encapsulation step-by-step.