Online since 1990 Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)
(Userland) open and closed shadowDOM used as an option in (user) customElements (aka Web Components)
and user-agent shadowDOM (as shown in your last screenshot) which users can not change, it is used in media elements and input/textarea elements.
user-agent shadowDOM has been around for ages in <input> and the like, so each Browser vendor could implement their own (html5) code. That is why input and friends have a different UI in different browsers.
Us mortal Developers just couldn't see its content.
The "real" DOM and Userland shadowDOM are not"completely different realms".
They are all DOM - Document Fragments just with boundaries between them.
The boundary between "real" DOM and Userland shadowDOM can be crossed by:
inheritible styles
CSS properties
Constructable Stylesheets
and :part styling (:theme is not supported by all browsers yet)
This truly represents the sentiment, Developers who have never used shadowDOM, have a strong opinion on it. I would question you can actually call them Developers then.
If I get one of those idiots in my team, I make then use a browser without shadowDOM,
in other words: NO <input> or <video> tags! (its hard to type a password then...)
Wow, thank you so much for this dive on the shadow DOM! I'll admit, my initial intention for this blog was to write about the differences between the real DOM and the virtual DOM. My research brought me to discover the shadow DOM, so I thought it would be cool to include it in this blog. I didn't know these in depth details about the shadow DOM, you've inspired me to research this topic further and write another blog on the mysteries of the shadow DOM. If you'd like to share any resources on the topic I'd love to include them in my research.
Also, the meme was meant to be virtual DOM 1 and virtual DOM 2 speaking to each other, but I can see how it can be thought that it's developers speaking instead. I should have labeled them for clarity. Whoops! 😅
I'd like to add a little more information about Shadow DOM use cases:
Web Components: Shadow DOM is a key technology in the Web Components standard. It allows developers to create reusable components that don't interfere with the rest of the page's styling and scripting. This is crucial for maintaining codebase modularity and avoiding conflicts in complex applications.
Style Isolation: Shadow DOM enables developers to encapsulate component-specific styles. The styles applied to elements within the shadow DOM won't affect or be affected by the global styles of the rest of the page. This helps in building consistent and maintainable UI components.
Complex UI Elements: Elements like video players, audio players, and interactive widgets often utilize the shadow DOM. It lets developers manage the internal UI of these components without cluttering the main DOM.
Third-party Widgets: When integrating third-party widgets or components into a website, the shadow DOM can prevent these components from interfering with the website's overall styling and functionality.
Security: Shadow DOM provides a level of isolation that helps prevent external scripts from directly interacting with the internals of a component, adding an extra layer of security.
Avid theatre lover and hot chocolate drinker!
Non-developer, but an eager learner and contributor to community.
Buffalo native currently living in NYC and in search of a good place for wings.
very good article.
I want give you (Lyndsi, and Danny) 100 thumbs up
This DOM is referred to as the page's real DOM. The real DOM, by itself, is only able to update the entire DOM simultaneously every time there is a change to the DOM. This makes it very slow and expensive to make updates to the page. That's where the virtual DOM comes to save the day!
React uses this comparison to quickly detect where the real DOM needs to be updated and updates only those elements instead of the entire DOM
I still don't understand those two sentences.
For the first one,
how much is it faster? and how much is it slower?
For the second one,
"updates only those elements instead of the entire DOM"
eventually, it means changes to the page's real DOM.
I am very confused with them.
If anyone explains it in more detail with references, I'd be appreciate
Its more that the number of DOM updates you make can become a problem in large applications that have a lot of DOM nodes, because they all have to be redrawn. The virtual DOM is basically a convenience tool that let's you batch your DOM updates, so the browser only has to redraw once on every state change cycle.
Thanks for your reply.
So, they are all about reflow/repaint.
In React's virtual Dom, All the updates are applied to real DOM using DocumentFragment once. is that right?
We're a place where coders share, stay up-to-date and grow their careers.
There are three types of shadowDOM
(Userland)
openandclosedshadowDOM used as an option in (user) customElements (aka Web Components)and
user-agentshadowDOM (as shown in your last screenshot) which users can not change, it is used in media elements and input/textarea elements.user-agentshadowDOM has been around for ages in<input>and the like, so each Browser vendor could implement their own (html5) code. That is whyinputand friends have a different UI in different browsers.Us mortal Developers just couldn't see its content.
The "real" DOM and Userland shadowDOM are not "completely different realms".
They are all
DOM - Document Fragmentsjust with boundaries between them.The boundary between "real" DOM and Userland shadowDOM can be crossed by:
:partstyling (:themeis not supported by all browsers yet)This truly represents the sentiment, Developers who have never used shadowDOM, have a strong opinion on it. I would question you can actually call them Developers then.
If I get one of those idiots in my team, I make then use a browser without shadowDOM,
in other words: NO
<input>or<video>tags! (its hard to type a password then...)Wow, thank you so much for this dive on the shadow DOM! I'll admit, my initial intention for this blog was to write about the differences between the real DOM and the virtual DOM. My research brought me to discover the shadow DOM, so I thought it would be cool to include it in this blog. I didn't know these in depth details about the shadow DOM, you've inspired me to research this topic further and write another blog on the mysteries of the shadow DOM. If you'd like to share any resources on the topic I'd love to include them in my research.
Also, the meme was meant to be virtual DOM 1 and virtual DOM 2 speaking to each other, but I can see how it can be thought that it's developers speaking instead. I should have labeled them for clarity. Whoops! 😅
I'd like to add a little more information about Shadow DOM use cases:
Great job with this. Love the Lion King meme at the end!
Thanks, I had a lot of fun with this one!
Haven't heard of shadow DOM before. Thank you for this, I learned something new today!
I'll be writing a future blog diving deeper on the mysteries of the shadow DOM, stay tuned for more! 😁
A great article @lyndsiwilliams. Learnt a new think: Shadow DOM. Thanks !!
Thank you!
Did not know about Paint flashing or the entire rendering panel in dev tools! That will be a game changer for me, thank you!
I was really excited when I discovered this too, game changer for sure!
got some elaborate view about DOM
Thanks for this article 🙏
So cool to show how to activate options ✨
very good article.
I want give you (Lyndsi, and Danny) 100 thumbs up
I still don't understand those two sentences.
I am very confused with them.
If anyone explains it in more detail with references, I'd be appreciate
Its more that the number of DOM updates you make can become a problem in large applications that have a lot of DOM nodes, because they all have to be redrawn. The virtual DOM is basically a convenience tool that let's you batch your DOM updates, so the browser only has to redraw once on every state change cycle.
Thanks for your reply.
So, they are all about reflow/repaint.
In React's virtual Dom, All the updates are applied to real DOM using DocumentFragment once. is that right?