I think the word “component” in “web components” confused a lot of people — at least it did me.

“Web components” sounded like the web platform’s equivalent to “React components”. JSX had and now the web had .

But when you try building web components the same way you build React components, it’s easy to get frustrated and give up because web components don’t work like React components — I know I gave up a few times.

The grain of a React component is not the grain of a web component. Their design prioritize different functionality and forms of use. If you try to use one like the other, you’ll fight the direction of their natural grain.

Web components have their own grain and it favors enhancement over replacement. What do I mean by this?

A typical React component might look like this^[1]:

<UserAvatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
/>

You could write a web component this same way, e.g.

<user-avatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
>user-avatar>

But the unique power of web components (in the browser) is that they can render before JavaScript. React components cannot do this — full stop.

This feature of web components encourages a design of composability. Rather than an empty “shell component” that takes data and (using JavaScript exclusively) renders the entirety of its contents, web components encourage an approa