Sign in
Skip to solution
mediumFrontend

Explain the difference between Shadow DOM, Emulated, and None View Encapsulation with compile output.

715 views
01

Understand the problem

Explain ViewEncapsulation and compiled CSS results.

stylesencapsulation
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Emulated applies custom _ngcontent-* attributes to scope styles locally. ShadowDom uses native browser Shadow DOM boundaries. None injects styles globally, meaning selector names are not hashed and styles affect the whole page.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Configuring ViewEncapsulation modes in Angular Component
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-emulated-styles',
  standalone: true,
  encapsulation: ViewEncapsulation.Emulated,
  styles: 'span { font-weight: bold; }',
  template: '<span>Emulated text styling</span>'
})
export class EmulatedComponent {}

@Component({
  selector: 'app-global-styles',
  standalone: true,
  encapsulation: ViewEncapsulation.None,
  styles: 'span { color: blue; }',
  template: '<span>Global blue span</span>'
})
export class NoneComponent {}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 39 of 121 decoded in the Angular track. One more won't hurt.

Back to track