Bird
0
0

Given this Angular component code:

medium📝 component behavior Q13 of 15
Angular - Components
Given this Angular component code:
@Component({
  selector: 'app-box',
  template: `
Hello
`, styles: [`.box { color: red; }`], encapsulation: ViewEncapsulation.None }) export class BoxComponent {}

What will be the color of all elements with class box in the entire app?
AAll <code>box</code> elements in the app will be red.
BOnly the <code>box</code> inside <code>app-box</code> will be red.
CNo <code>box</code> elements will be red because styles are scoped.
DOnly <code>box</code> elements inside Shadow DOM will be red.
Step-by-Step Solution
Solution:
  1. Step 1: Understand ViewEncapsulation.None effect

    None disables style encapsulation, so styles apply globally to all matching elements.
  2. Step 2: Apply to the .box class

    The style `.box { color: red; }` will affect every element with class 'box' in the entire app, not just inside this component.
  3. Final Answer:

    All box elements in the app will be red. -> Option A
  4. Quick Check:

    None encapsulation = global styles [OK]
Quick Trick: None means styles leak globally, coloring all matching elements [OK]
Common Mistakes:
  • Assuming styles stay inside component with None
  • Confusing ShadowDom encapsulation effects
  • Thinking Emulated behaves like None

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes