Angular Brings — View Encapsulation

So what exactly is View Encapsulation?

Types of View Encapsulation

1.Emulated View-Encapsulation

parent css
parent html component.
Child html component
View of parent
Inspected Element to show difference host id for Emulated .
Emulated Encapsulation

2. None Encapsulation

None Encapsulation
View of None Encapsulation
None Encapsulation inspect.

3. Native / ShadowDom Encapsulation

ShadowDom inspect
child component encapsulation
ShadowDom in child
Value Based Encapsulation

Summary:

  1. None: No ShadowDom is created and no style encapsulation takes place.
  2. ShadowDom: ShadowDom is created and style encapsulation takes place.
  3. Emulated: No ShadowDom is created and style encapsulation takes place.

--

--

--

A enthusiastic web developer ,who is curious about technologies.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building An End-to-end Application with LoopBack & React.js

PizzaScript Parser with RxGo — The Pyramid of Doom

Array Methods Explained

D3.js in all its glory

Introduction to list building in React

Restarting Webserver (Httpd) Service is not idempotence in nature

How I Built an Event Microsite in 4 Steps

Building Velcro — Part 1: Internet-wide NPM module resolution

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aayush Bhankale

Aayush Bhankale

A enthusiastic web developer ,who is curious about technologies.

More from Medium

Is Angular Easy To Learn?

ComponentStore — Introduction

forRoot() and forChild()

Configuring Environment Variables in Angular | Angular Environment