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 approach of composing core content with HTML and then wrapping it in a custom element that enhances its contents with additional functionality.

<user-avatar>

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

</user-avatar>

Jim Nielsen • HTML Web Components