Post

So lots of hot takes going around about web components. I love em, but I understand the frustrations. Here's my take on the single thing that makes Web Components distinct, for better or worse. jschof.dev/posts/2024/1...

jschof.devThe Differentiating Property of Web Components - Jschof.devThere's been a lot of discussion on whether web components are good or not. But there is one property of web components that might make them the best or the worst solution for your needs.

2 reposts5 likes

That was a good read, Jim! Another concern I have is the lack of rich reactivity. Like when you pass an object, like a model, and want it to rerender when some of its properties change. Not much of an issue for design systems or other leaf components, but not great for complex app-level stuff IMHO

Nice post! I think a couple of claims are a little off though, in particular there are common patterns that make web components easily do things you say they can't in the article...

Like setting properties. This is not a Lit abstraction. Properties are plain JS. You can implement them without any helpers. And you can set them from plain JS too, or from frameworks an libraries like React, Angular, Vue, Lit, Stencil, FAST, etc. Lit just provides a way to do it from templates.

Yeah, Lit has a construct in its `html` tagged literal that let's you denote property assignment. But this is an assignment made in the litJS templating framework. I don't think I said setting a property was not possible with web components, it's just awkward without those abstractions 🤔

In my other posts I gush over the lit context. It's the only reasonable way to share live javascript in a somewhat ergonomic way. Technically though... a provider shouldn't know what should be put in its slots, and there are many that say reaching into your assigned slots is a bad pattern

Render props are possible to, either by using a common template library between parent and child, or by using side-effectful functions that get passed a DOM node to render to instead of returning a template. Then the parent can use any rendering technique it wants.

Nice post! And thanks to @justinfagnani.com for the corrections. In particular, I agree with the use cases. At a certain scale and for certain use cases, they have tremendous value, despite any limitations they may have. The value they provide is worth the effort to support them in frameworks.