Web components are misunderstood technology in my opinion. Like with anything in life, when the world has an overly optimistic idea of what it should be, it’ll never be able to live up to that. Add into the fact we have modern frameworks/libraries like React, Angular, and Vue which do its core concept, and then some, seeing its beauty is difficult.
Out of the box, they provide a lot of functionality that is powerful and easily transferable if done right. In that aspect, I do consider them the microservices of the modern frontend spectrum. Others may feel different, which is ok, but let’s take a minute to look at a few points that justify my point.
Core Component Functionality Done Well
Taking an honest look at web components, you’ll see that it does the needed simple logic you’d want in a component well. Takes props, can update the DOM on a change, can have event listeners to delegate methods to user actions, dynamic class names, etc.
Of course there are some things you’d need to manually write out in vanilla JS utils to make some of these things happen, but still, it does them well.
Minimal Setup
Web Components are JavaScript, no framework or library required. Not having any outside dependencies to properly support its development and iteration is a big deal. Especially today when everything under the sun on the web has a hefty package.json dependencies list.
This aspect alone is powerful because it means that you can build a hefty component library with the technology, that can be easily used in conjunction with other technologies without too much headache.
Optional Isolation When Needed
Web Components have two DOM options: light and shadow. The light DOM is what you’ve grown accustomed to. In the light DOM a component, and its children, will be a member of the current DOM tree. In the shadow DOM, things are more isolated. The Web Component top-level element will be a member of the DOM tree, but its child elements will live in an isolated DOM instance.
Plays Well With Others
Taking the points from above, all that adds into Web Components playing well with other libraries. With the right understanding of how to properly build them, and understanding of your own use cases, it’s not hard to plug and play anywhere you choose.
In Closing
In short, Web Components are powerful. When coming to them as an engineer looking to properly scale a solution between a variety of applications with different tech stacks, there really isn’t another option better. No technology is ever going to be a whole solution, that’s realistically impossible.
That is ok though. Instead of looking for a complete option right out the gate, it’s better to view technology as parts of the pie. When done right, Web Components are solid choice to make for building out your foundation. Or in terms of our pie analogy, the crust.