[Solved] You wrote this Angular component:@Component({ selector: 'app-test', template: `Test`, styles: [`p { font-weight: bold; }`], encapsulation: ViewEncapsulation.... | Angular

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:

Step 1: Understand ShadowDom encapsulation
ShadowDom encapsulates styles inside the browser's native Shadow DOM, isolating them from the main document.
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.
Final Answer:
The styles are scoped inside Shadow DOM, but you are inspecting outside it. -> Option A
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

Master "Components" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

You wrote this Angular component:

Step 1: Understand ShadowDom encapsulation

Step 2: Inspecting styles outside Shadow DOM

Final Answer:

Quick Check:

Want More Practice?