Browser Extensions and Widgets. For example, I have the Grammarly’s extension for Chrome and they use Shadow DOM for its widget. If you EXPECT your page’s DOM, you will see the Shadow DOM as part of the normal DOM. See the image below:
I don't consider Shadow DOM to have a security drawback. Closed mode is *more* secure than the Light DOM HTML that folks have been writing for decades. It's just not impenetrable. If someone monkey patches the native attachShadow API, they can capture your closed roots, of course. The only issue arises when folks *think* they can use closed mode as a hard security barrier, which it isn't.
If readers are interested in learning more about Shadow DOM, both imperative and delcarative, as well as other Web Component related standards, please check out my Web Component Engineering course. There's a whole module (14 lessons), entirely devoted to Shadow DOM.
Excellent article, Petar! Clean explained.
Interesting article with an interesting typo.
Quote
"Use Cases and Examples
Browser Extensions and Widgets. For example, I have the Grammarly’s extension for Chrome and they use Shadow DOM for its widget. If you EXPECT your page’s DOM, you will see the Shadow DOM as part of the normal DOM. See the image below:
End Quote 😏
My emphasis.
I expect you may smile too when you inspect.
Damn these spell checks.
AvidReader
Haha, thanks for the feedback!
No probs! Been there, got a T-shirt or three.
I don't consider Shadow DOM to have a security drawback. Closed mode is *more* secure than the Light DOM HTML that folks have been writing for decades. It's just not impenetrable. If someone monkey patches the native attachShadow API, they can capture your closed roots, of course. The only issue arises when folks *think* they can use closed mode as a hard security barrier, which it isn't.
If readers are interested in learning more about Shadow DOM, both imperative and delcarative, as well as other Web Component related standards, please check out my Web Component Engineering course. There's a whole module (14 lessons), entirely devoted to Shadow DOM.
https://bluespire.com/p/web-component-engineering
Indeed! Thank you for sharing it, Rob! Looks like a great course.
Very well written article and straightforward advice, Petar. Thank you for sharing!
Thanks, Basma! I'm glad you liked it! :))