Why use Web Components over traditional DOM manipulation?

If you’ve been following my articles on HTML Web Components, you may have come away thinking…

This looks a lot like traditional DOM manipulation.

And you’d be right!

Web Components basically do exactly the same thing you can do with HTML and vanilla JS already. So why would you even bother using Web Components?

What I like about them is that they make it easier to a lot of the annoying stuff involved in DOM manipulation…

• They auto-instantiate.
• You can easily have multiple instances on a page.
• You can add options and settings declaratively in your markup.
• It’s much more obvious what a component does just by looking at the HTML.
• The custom element provides a simple, scoped hook for styling with CSS.
• You can detect and react to attribute changes.
• You can detect when the JS has loaded with CSS.
• Event handling is much easier.

If vanilla JS is a manual screwdriver, WC’s are an electrical drill.

You might use them for the same task, but a WC will make some tasks a bit faster/easier (and be overkill for other things).