Bird
0
0

Given this component code:

medium📝 component behavior Q4 of 15
Angular - Components
Given this component code:
@Component({
  selector: 'app-test',
  template: `

Hello

`, styles: ['.text { color: red; }'], encapsulation: ViewEncapsulation.None }) export class TestComponent {}

What color will the paragraph text be in the browser?
ARed only inside this component
BRed globally on all paragraphs with class 'text'
CDefault browser color (no red)
DBlue, because styles are overridden
Step-by-Step Solution
Solution:
  1. Step 1: Understand effect of ViewEncapsulation.None

    Styles are not scoped and apply globally to matching selectors.
  2. Step 2: Analyze style selector and impact

    All paragraphs with class 'text' in the app will have red color.
  3. Final Answer:

    Red globally on all paragraphs with class 'text' -> Option B
  4. Quick Check:

    None encapsulation = global styles [OK]
Quick Trick: None encapsulation makes styles global, not scoped [OK]
Common Mistakes:
  • Thinking styles apply only inside component
  • Assuming default color
  • Confusing with ShadowDom scoping

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes