Web Components are... Web Components

John Kreitlow — Thu, 05 Dec 2024 00:41:22 +0000

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.

SVG and the `all` property

John Kreitlow — Thu, 07 Jun 2018 19:33:50 +0000

Is this a bug, or a feature? I want all elements in a div to be reset with the all property, but I'm getting different results in Chrome and Firefox. Chrome seems to think that the cx, cy, d, r, stroke, and fill (and probably other properties) are CSS-controllable. Firefox seems to apply the fill properly, and doesn't touch the other attributes.

Firefox gives me what I'd more or less expect. It's not perfect, but I'm not really sure what to expect:

Safari only shows the triangle:

Chrome takes all very, very seriously:

wat do? 🤷🏻‍♂️

Update

I checked out the W3C spec and found this section. I think it pertains to this issue but I really have no idea how to decipher it.

DEV Community: John Kreitlow

Web Components are... Web Components

SVG and the `all` property

Update