Encapsulation
Last updated
What is Encapsulation?
An encapsulation policy for the component's styling. Possible values:
ViewEncapsulation.Emulated: Apply modified component styles in order to emulate a native Shadow DOM CSS encapsulation behavior.ViewEncapsulation.None: Apply component styles globally without any sort of encapsulation.ViewEncapsulation.ShadowDom: Use the browser's native Shadow DOM API to encapsulate styles.
If not supplied, the value is taken from the CompilerOptions which defaults to ViewEncapsulation.Emulated.
If the policy is ViewEncapsulation.Emulated and the component has no styles nor {@link Component#styleUrls styleUrls}, the policy is automatically switched to ViewEncapsulation.None.
Free resources to learn Encapsulation
- Official docsStyle Scoping
- Official docsComponent Encapsulation
More in stage 2: Components
Encapsulation: common questions
Can I learn Encapsulation in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Encapsulation in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Encapsulation tutorial for beginners?
It is lesson 16 of 158 in the free Angular roadmap, in stage 2, Components. If you are new to Angular, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.