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
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
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.
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.
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
This is by far the best video tutorial on these topics.
dude!! how come I am finding you now. This is unbelievably crisp and to the point. Really really good!.
Just Wow, listen this video carefully, within 5 min you will get very good knowledge.☺
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
fast, understable and to the point
Amazing
This is like that history of the world video. Superfast, crisp and concise. Great work, man!
What a video on a most important topic. Hats off
Agree with all the positive comments. Thanks a lot for your work!
You explained this very well! Thanks for making this :) My only suggestion would be to make everything on your screen a bit bigger.
Explaination is awesome, cleared all the doubts in very simple language while showing everything how these are working. Thanks Bro
With examples you resolved many doubts on this topic…best on this topic so far…thank you ❤
Thank you sir... God Bless you for making it simpler...
Pretty crisp, clean and very well explained
Amazing video. Worth watching!!!!!
This is amazing explanation. Please make more videos!
Explanation is good but you should pause with intonation and explain...to make it better!! :)
A lot of useful information shared in 5 minutes. Great!!
Very good explanation 👍🏼 Thank you!
wow wow wow. So gooood explanation!
Great video!
A video about Web Components would be awesome too.
what an explanation. superb 👍
Excellent video! Thanks!
It have much more than expected, thanks for sharing
COOL yet simple
Perfect and neat!
Awesome explanation... Thank you..
good and simple explanation
concise and precise
Great video! Would love a video on custom components where you import external JavaScript libraries in the custom component!
Nice! A little hard to my ear, but the material is well worth it.
Great video!
That was a really good explanation, and lots of information in such a short time. 👍
Very useful, thank you!
thank you. straight to the points!
Thank you sir nice explanation
Very nice explantions
Amazing!
The example of tag is impressive:)
To the point. Nice!
Great video!. I love it.
Real great video, very straight to the point and clearly explained. Please make more videos! :)
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 :)
thank!! great explanation
Brilliant.
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.
clear explanation
Awesome, Well explained :)
Loved it. Cut right to the meat of it.
Hi Kamran, Thanks for the video. It will be very nice if you describe things in little more detail. Thanks
Can't see the code and talks too fast.
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.
Would love to learn creating custom components
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 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. 👍
Great !
great bro
Have you got any advice on creating modular jS code?
I think the word "query" has the widest pronunciation variety in the whole dev-world.
Not too clear . you are runing faster than time?
Thanks
Thanks for the video!! The discord link has expired. If it's still an offer I would like to be part of it.
nicely done. (y)
Bro please make video on react js interview preparation.
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
Good
Please upload more videos sir
Just wao ....
👍
You forgot dark dom
Shadow dom please sensei
boiiii a little slower speach won't hurt