Member-only story
Web Component Solutions: A Comparison
“Don’t repeat yourself.” Every programmer has this concept drilled into their head when first learning to code. Any time you have code you find yourself duplicating in several places, it’s time to abstract that code away into a class or a function. But how does this apply to user interfaces? How do you avoid re-writing the same HTML and CSS over and over again?
If you’re using a UI framework like Angular or a UI library like React, the answer is simple: you build a component. Components are bits of HTML, CSS, and JavaScript put together in a way that they can be easily reused.
But what if you’re not using Angular, React, Vue, or whatever else is the latest and greatest new JavaScript framework? What if you’re writing plain vanilla HTML, CSS, and JavaScript? Or what if you want to write a component that is framework-agnostic and can be used in any web app regardless of what it’s written in?
Web Components
Enter web components. Web components allow you to create custom elements with encapsulated functionality that can be reused anywhere. They’re created using templates and slots and are defined in the shadow DOM, which isolates your element’s styles and scripts from the rest of the DOM to avoid collisions.
