Component styles and encapsulation in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is style encapsulation in Angular components?

Style encapsulation means Angular keeps component styles separate so they only affect that component, preventing styles from leaking out or being affected by global styles.

intermediate

Name the three encapsulation modes Angular supports.

Angular supports: 1) Emulated - styles scoped to component using attributes, 2) None - styles are global, 3) ShadowDom - uses native browser shadow DOM for true encapsulation.

intermediate

How does Angular's Emulated encapsulation work?

Angular adds unique attributes to component elements and styles, so styles apply only to that component's elements, simulating style isolation without native shadow DOM.

beginner

What happens if you set encapsulation to ViewEncapsulation.None?

Component styles become global and can affect any element in the app, losing style isolation.

advanced

Why might you choose ShadowDom encapsulation in Angular?

ShadowDom uses the browser's native shadow DOM, providing true style and DOM encapsulation, which is useful for web components or when strict isolation is needed.

Which Angular encapsulation mode scopes styles using unique attributes but does not use native shadow DOM?

A Global

B Emulated

C ShadowDom

D None

Emulated mode adds unique attributes to elements and styles to scope styles without using native shadow DOM.

What is the effect of setting encapsulation to ViewEncapsulation.None?

A Styles are scoped only to the component

B Styles are ignored

C Styles become global and affect the whole app

D Styles use native shadow DOM

None mode disables encapsulation, making styles global.

Which encapsulation mode uses the browser's native shadow DOM?

A Scoped

B None

C Emulated

D ShadowDom

ShadowDom mode uses native browser shadow DOM for true encapsulation.

Why is style encapsulation important in Angular components?

A To prevent styles from leaking and affecting other parts

B To make styles global

C To disable CSS

D To speed up rendering

Encapsulation keeps styles isolated to avoid conflicts and unexpected style changes.

If you want to create a reusable web component with strict style isolation, which Angular encapsulation should you use?

A ShadowDom

B Emulated

C None

D Global

ShadowDom provides true isolation using native browser features, ideal for reusable web components.

Explain the differences between Emulated, None, and ShadowDom encapsulation modes in Angular.

Think about how styles are applied and isolated in each mode.

Describe why style encapsulation matters when building Angular components and what problems it solves.

Consider what happens if styles leak between components.