Notes - Shadow DOM is hidden DOM tree attached to elements in regular DOM -- Shadow DOM elements aren't affected by CSS, conversely the CSS in the shadow root won't affect the regular DOM - Virtual DOM: 5:03
I quite enjoy your videos sir, but I have a request for you. Please zoom in to the screen, because the text is too small to read on a smaller device like my phone. Maybe you expect your audience to watch on a computer/laptop, but people like me exist. Please consider this request. Thank you.
Another great video. Just one suggestion when showing browser console. please try to enlarge the fonts a bit it helps in understanding the changes precisely. Thanks
Nice and crisp explaination. So when react component updates only virtual Dom, those changes will not b available when we see Dom using 'inspect element'?
You *will* see those changes but react decides when it is going to do the changes on the actual DOM in an optimized way, so for example if you have a hundred components on a page and only of them is changed, react would re-render only one and won't re-render the rest of the 99 unchanged components. You might be interested in reading about react fiber: github.com/acdlite/react-fiber-architecture
I am still trying to understand the concept of the shadow Dom. is the point that you have an element in your webpage that is independent of parent? I got a little confused when you enabled the shadow Dom in inspection since in the end it renders all the same.
This is by far the best video tutorial on these topics.
With examples you resolved many doubts on this topic…best on this topic so far…thank you ❤
You explained this very well! Thanks for making this :) My only suggestion would be to make everything on your screen a bit bigger.
Notes
- Shadow DOM is hidden DOM tree attached to elements in regular DOM
-- Shadow DOM elements aren't affected by CSS, conversely the CSS in the shadow root won't affect the regular DOM
- Virtual DOM: 5:03
Agree with all the positive comments. Thanks a lot for your work!
Explanation is good but you should pause with intonation and explain...to make it better!! :)
Great video! Would love a video on custom components where you import external JavaScript libraries in the custom component!
I quite enjoy your videos sir, but I have a request for you. Please zoom in to the screen, because the text is too small to read on a smaller device like my phone. Maybe you expect your audience to watch on a computer/laptop, but people like me exist. Please consider this request. Thank you.
dude!! how come I am finding you now. This is unbelievably crisp and to the point. Really really good!.
Can't see the code and talks too fast.
COOL yet simple
This is amazing explanation. Please make more videos!
boiiii a little slower speach won't hurt
I think the word "query" has the widest pronunciation variety in the whole dev-world.
This is like that history of the world video. Superfast, crisp and concise. Great work, man!
Just Wow, listen this video carefully, within 5 min you will get very good knowledge.☺
Thank you sir nice explanation
Very useful, thank you!
Great video!
A video about Web Components would be awesome too.
Bro please make video on react js interview preparation.
fast, understable and to the point
Amazing
What a video on a most important topic. Hats off
what an explanation. superb 👍
how to select shadow dom in js. like input type=search and I want to add event in search-cancel shadow dom
You can't access the Shadow DOM nodes in the outer page. You will have to write those event handlers as a part of Web Component itself.
Nice! A little hard to my ear, but the material is well worth it.
Not too clear . you are runing faster than time?
wow wow wow. So gooood explanation!
Please upload more videos sir
Another great video. Just one suggestion when showing browser console. please try to enlarge the fonts a bit it helps in understanding the changes precisely. Thanks
Thank you I will keep that in mind for future :)
Pretty crisp, clean and very well explained
Explaination is awesome, cleared all the doubts in very simple language while showing everything how these are working. Thanks Bro
Thank you sir... God Bless you for making it simpler...
Very nice explantions
Thanks for the video!! The discord link has expired. If it's still an offer I would like to be part of it.
Perfect and neat!
Very good explanation 👍🏼 Thank you!
Great video!
Nice work but the last part about the camelCase attributes and the events, these are not a part of the shadow DOM, this is JSX syntax
Amazing!
Nice and crisp explaination. So when react component updates only virtual Dom, those changes will not b available when we see Dom using 'inspect element'?
You *will* see those changes but react decides when it is going to do the changes on the actual DOM in an optimized way, so for example if you have a hundred components on a page and only of them is changed, react would re-render only one and won't re-render the rest of the 99 unchanged components. You might be interested in reading about react fiber:
github.com/acdlite/react-fiber-architecture
@@roadmapsh Got it. thanks for the reply. 👍
Thanks
A lot of useful information shared in 5 minutes. Great!!
Just wao ....
Good
That was a really good explanation, and lots of information in such a short time. 👍
To the point. Nice!
I am still trying to understand the concept of the shadow Dom. is the point that you have an element in your webpage that is independent of parent? I got a little confused when you enabled the shadow Dom in inspection since in the end it renders all the same.
Hi Kamran, Thanks for the video. It will be very nice if you describe things in little more detail. Thanks
The example of tag is impressive:)
👍
Would love to learn creating custom components
Have you got any advice on creating modular jS code?
Brilliant.
Awesome explanation... Thank you..
It have much more than expected, thanks for sharing
Excellent video! Thanks!
thank you. straight to the points!
good and simple explanation
Great video!. I love it.
Loved it. Cut right to the meat of it.
Shadow dom please sensei
concise and precise
Real great video, very straight to the point and clearly explained. Please make more videos! :)
nicely done. (y)
clear explanation
Great !
Awesome, Well explained :)
thank!! great explanation
great bro
You forgot dark dom