This post first appeared on my LinkedIn in September 2024.
As someone who builds complex custom elements for massive distributed systems, I want to weigh in on the whole "Web components are <insert-opinion>" debate that's been bouncing around.
Haven't wheels already been invented, like, at least a few years ago? We're all trying to find the right wheels for the carts we're trying to pull. If the <button> element was perfect, we wouldn't need <input type="button">, or <div role="button"> or the unsupported <button is="custom-button">, or even the forbidden impostor <a class="button">, to render this very basic, yet vastly intricate concept.
The fact that we can now create a custom "button" directly in the browser, one that doesn't have the historical baggage of <button>, or the baffling rigidity of the jack-of-all-trades <input>, is something that should be celebrated. In some cases, we don't even need to include native form elements in our shadow DOM anymore, thanks to the ElementInternals API. ElementInternals handles both ARIA and form association, at a platform level. This means native forms can treat custom elements the same as any other form control, with field validation, label association, and value submission included. It's by no means a perfect solution yet, but it's better than everything we've had before it, and a lot of people are working very hard to make it better for everyone.
Framework-driven components literally can't do this. If they claim they can, it means they're either building custom elements wrapped in extra JS, or they're doing a LOT of heavy lifting to reproduce what's already available in the browser.
I've always had issues with front end frameworks, which is why I choose not to use them. I find that they make it dangerously easy to dig a hole too big to climb out of, especially when they bring their own abstractions that obfuscate what's actually being rendered on the page. There's too much "magic" that happens, and I don't appreciate the "just trust me, bro" vibes I get from how certain frameworks function (hooks, JSX, etc.).
To wrap this up, I can count the amount of times I've had to work professionally with React, Vue, and Angular combined on one hand. I guess the one I used most was Vue, and even then it was only for a few months before I started building custom elements in 2020.
I've seen no compelling reason to go back.
Top comments (0)