Bird
0
0

You wrote this Angular component:

medium📝 Debug Q14 of 15
Angular - Components
You wrote this Angular component:
@Component({
  selector: 'app-test',
  template: `

Test

`, styles: [`p { font-weight: bold; }`], encapsulation: ViewEncapsulation.ShadowDom }) export class TestComponent {}

But the p text is not bold in the browser. What is the likely cause?
AThe styles are scoped inside Shadow DOM, but you are inspecting outside it.
BThe browser does not support Shadow DOM, so styles are ignored.
CYou forgot to import <code>ViewEncapsulation</code> from <code>@angular/core</code>.
DThe component selector is incorrect and not used in HTML.
Step-by-Step Solution
Solution:
  1. Step 1: Understand ShadowDom encapsulation

    ShadowDom encapsulates styles inside the browser's native Shadow DOM, isolating them from the main document.
  2. Step 2: Inspecting styles outside Shadow DOM

    If you inspect the page outside the Shadow DOM, you won't see the styles applied because they are inside the component's shadow root.
  3. Final Answer:

    The styles are scoped inside Shadow DOM, but you are inspecting outside it. -> Option A
  4. Quick Check:

    ShadowDom styles live inside shadow root, not visible outside [OK]
Quick Trick: ShadowDom styles are inside shadow root, inspect there [OK]
Common Mistakes:
  • Assuming ShadowDom styles apply globally
  • Not checking if component is used in HTML
  • Thinking browser lacks Shadow DOM support

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes