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! 😅
For further actions, you may consider blocking this person and/or reporting abuse
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! 😅