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.
KZbin Page: / leelawebdev
Facebook Page: / leelawebdev
Twitter Page: / leelanarsimha
Linkedin: / leela-narasimha-reddy-...
GitHub: github.com/leelanarasimha
#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...

[@priyasuryawanshi1143]

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

[@tarcisiodeoliveira1140]

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

[@shubhamdas9489]

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

[@sherifsamir6888]

thanks you so much, simply explained and to the point

[@meetshah5062]

Provide very good understanding of this.

[@Aaaaa_kkkk]

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

[@LeelaWebDev]

Thank You

[@radhakrishna3023]

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

[@LeelaWebDev]

Thanks and welcome

[@krishnachaitanya7349]

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.

[@shivaramkrishna6583]

Very nice explanation..

[@NangalumYoutuberThaan]

Great !

[@naveenkumarpulikonda1998]

Nice explanation bro...

[@LeelaWebDev]

Glad you liked it

[@prashantjoshi4691]

superb ,

[@LeelaWebDev]

Thanks a lot

[@baskarrajagopalan7499]

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

[@LeelaWebDev]

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree - this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM. For more info: developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

[@pusarlaaishwarya5035]

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

[@LeelaWebDev]

Yeah. we can apply

[@VENUGOPAL_0404]

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

[@LeelaWebDev]

Generally i use in the component level only. If you have any ideas let me know

[@radhakrishna3023]

can you explain unit testing briefly

[@LeelaWebDev]

Sure. I will cover

[@amitgaikwad3120]

Saw each and every video for this topic on KZbin😅... But man...You just couldn't stop me from subscribing to your channel🔥🔥 Very well explained !! Keep up the fabulous work

[@LeelaWebDev]

Thank you so much 😀

[@vandanasaini3520]

kitini speed se bol rahe ho ap

[@kashifalikhan4420]

BTW emulated and ShadowDom is different,

[@Respect_Mah_Authoritah_]

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

[@LeelaWebDev]

It is not supported by old browsers. Modern browsers now supporting. That's why emulated is there

[@Respect_Mah_Authoritah_]

@@LeelaWebDev so then maybe you should update your video to reflect that? Otherwise it provides incorrect information that it’s not supported.

[@LeelaWebDev]

This video is also long back taken. Now you are watching. Latest angular 17 videos also I uploaded

[@Respect_Mah_Authoritah_]

@@LeelaWebDev I’m watching this because this is the first result that is recommended when searching for this topic on KZbin. Not your Angular 17 video. Feel free to verify yourself.

[@LeelaWebDev]

KZbin will show that is based on the search. That is your job to check whether the video is latest or not , based on the upload date.

[@patrickxyascii5799]

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

[@LeelaWebDev]

Ok i will try