Lived experience
I hold this truth to be self-evident: the larger the abstraction layer a web developer uses on top of web standards, the shorter the shelf life of their codebase becomes, and the more they will feel the churn.
Jekyll Includes are Cool - daverupert.com
Dave explains how Jekyll Includes are starting to convert him to web components. The encapsulation is nice and neat. And he answers the inevitable “but why not use React?” question:
Writing HTML that contains JavaScript, not JavaScript that contains HTML, feels good to me.
The key feature for me is that this approach doesn’t have to depend on JavaScript in the browser:
I like that Web Components are an entirely client-side technology but can be rendered server-side in existing tech stacks whether it’s Jekyll, Rails, or even some Enterprise Java system.
Related links
You can use Web Components without the shadow DOM
So what are the advantages of the Custom Elements API if you’re not going to use the Shadow DOM alongside it?
- Obvious Markup
- Instantiation is More Consistent
- They’re Progressive Enhancement Friendly
Liskov’s Gun: The parallel evolution of React and Web Components – Baldur Bjarnason
React has become a bloated carcass of false promises, misleading claims, and unending layers of backwards compatibility – the wrong kind of backwards compatibility, as they still occasionally break your fucking code when updating.
Pretty much anything else is a better tool for pretty much any web development task.
HTML Web Components Can Have a Little Shadow DOM, As A Treat | Scott Jehl, Web Designer/Developer
This is an interesting thought from Scott: using Shadow DOM in HTML web components but only as a way of providing sort-of user-agent styles:
providing some default, low-specificity styles for our slotted light-dom HTML elements while allowing them to be easily overridden.
But what about the shadow DOM? | Go Make Things
So many of the problems and challenges of working with Web Components just fall away when you ditch the shadow DOM and use them as a light wrapper for progressive enhancement.
Related posts
Switching costs
The enshittification of React …which was already pretty shitty for users.
Suspicion
Responses to my thoughts on why developers would trust third-party code more than a native browser feature.
Inertia
Two JavaScript frameworks—Svelte and Astro—share a philosophy, but take subtly different approaches.
Frustration
Applying the principle of least power to tools and technologies.
Whatever works for you
There are many ways to style a cat.