24. Understand View Encapsulation in Angular. Difference between Emulated, None, and Shadow Dom.

Hi Friends
In this video, we will see how to apply styles to all components that are declared in one component by using view encapsulation. Understand the difference between Emulated, None, and Shadow Dom.

If you like my video, please subscribe to my channel.

#Angular #leelawebdev

[indicprogrammer]

This was the new concept for me. as i have watched lots of angular tutorials but no one teaches this concept. thanks for creating this quality content....keep it up sir...

[tarcisiodeoliveira]

Thank you, for your great assistence on my education on the topic and to pronounce it with the Pos-Doc degree accent.

[priyasuryawanshi]

I read about this...in many places but I found it difficult...
But after watching this video I am clear what is viewencapsulation
Thank you so much

[shubhamdas]

You are very good sir ... thanks for quality content

[sherifsamir]

thanks you so much, simply explained and to the point

[meetshah]

Provide very good understanding of this.

[Aaaaa_kkkk]

Excellent. Following all ur videos they r very helpful. Thank you🙏

[krishnachaitanya]

View Encapsulation - shadow DOM
Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (75 and onwards) supports it too; the old Edge didn't.
DOM (Document Object Model)
There are some bits of shadow DOM terminology to be aware of:
Shadow host: The regular DOM node that the shadow DOM is attached to.
Shadow tree: The DOM tree inside the shadow DOM.
Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
Shadow root: The root node of the shadow tree.

ShadowDom
Emulated
None
Limitations - There are many 3rd party libraries (or extensions) that won't work with Shadow DOM content because they were not designed to deal with it, or need some additional configuration to work with Shadow DOM.

Metadata - Metadata is used to decorate a class so that it can configure the expected behavior of the class.

[radhakrishna]

yep this is first time to watch your videos awesome
teaching skills also fantastic

[pusarlaaishwarya]

input output concepts is only applicable for template forms??? can we also apply it for reactive forms??

[baskarrajagopalan]

ViewEncapsulation.ShadowDom is not clear. What is that real functionality of it? Could you please explain?

[VENUGOPAL_]

We are working in single-spa microfrontends...In one single -spa app they have added css in styles.css...when I route to that application and coming back to our application...their css getting overriden by our css...how can I achieve shadowdom in single-spa microfrontends globally...not component level

[amitgaikwad]

Saw each and every video for this topic on Youtube😅...
But man...You just couldn't stop me from subscribing to your channel🔥🔥

Very well explained !! Keep up the fabulous work

[kashifalikhan]

BTW emulated and ShadowDom is different,

[Respect_Mah_Authoritah_]

Shadow DOM is not supported by browsers? Who told you that?

[patrickxyascii]

Why can’t u explain in few sentences, u r going round and round n came to the point only in the last 2 mins