DOM or Document Object Model is the well-known concept to all of us. Some like it, but most of the people have a headache from it. John Resig even said that DOM is a Mess.
I mean, that talk is quite dated and lots of issues that were topic than are now part of the past. Because most important issue there was not DOM itself, rather set of tools that helped us to work with it (they actually made our life hard).
It is 2017 and I can say that currently available toolset for accessing and manipulating DOM nodes is quite impressive (especially if like me, you started when document.getElementById was a thing).
What sure did remain the bad side of working with DOM is that the whole process is expensive. More precisely re-renders can and will quite heavily hit your hardware resources. Which will inevitably put your app performances into danger.
Virtual DOM
Virtual DOM is a full representation of actual DOM. Its most important feature is in fact grouping of changes and doing a single re-render instead of many small ones.
So, in short, we can say that Virtual DOM is solving issues related to performances. (I will not go into the details about how Virtual DOM works. For this topic it is enough to know why it exists.)
Shadow DOM
Shadow DOM is like an introvert guy who safely protects himself from the influence of his surrounding and is not interested, nor he cares about changing the outside world.
Ask yourself, what main UI problem are frameworks like React or VueJS solving?
Encapsulation
CSS is hard. If you couple your styles while trying to reuse them in various combinations it becomes even harder. Inevitably that results in UI regression errors, hard maintenance, and bad scalability.
Still, I believe that main problem is not CSS, rather the way we use it.
Shadow DOM is a tool that helps us to overcome DOM encapsulation on the native level. It’s not only about CSS, it is about elements as well.
Opposite to regular DOM, Shadow DOM come in smaller pieces. That means that it is not a full representation of entire DOM. Rather you can look at it as lego bricks which form the actual DOM. Out of which each brick is a DOM for itself.
So, Shadow DOM is all about encapsulation, and that is it.
As per MDN and w3, Shadow DOM specification is currently work in progress. Therefor browser support is not quite great… and most probably that current implementation will change. But the core concept should remain the same.
Conclusion
I hope that now it is clear what problem Shadow DOM tries to solve and how it differs from Virtual DOM.
In near future, it will be very important to know the native way to handle encapsulation and components on the browser level. When that day arrives, lots of features that were custom built in every framework will be obsolete. Since it is almost always better to use native implementation than to come up with your own…
Play around with Shadow DOM today, it’s always good time to learn something new.
If you are reading this it means that you are curious and passionate about JavaScript and Front-End in general. That makes two of us!
Consider joining me on this adventure of discovery by following me here, clicking on that heart, or checking out my twitter account https://twitter.com/develoger
Once I hit 1000 followers on the blog I will share the prizes (public draw) -- 2 yearly subscriptions to https://egghead.io
