You may have come across some sort of spicy take like "web components aren't 'components'".

Well here's a spicier take. 🌶️

React components aren't components.

Neither are Solid, Svelte, or Vue.

They are ephemeral constructs in memory which technically have no direct relationship to HTML at all.

As far as the browser is concerned, the *only* sort of component it can be made aware of is a web component. It knows nothing—can know nothing—of anything else.

Here's where things get _really_ interesting.

You could mount React/Vue/Svelte/Angular/etc. "components" inside of web components if you wanted to.

Write <my-happy-react-land></my-happy-react-land> and mount React right there!

Heck, I might even argue that's the only way you *should* use React. Little React "islands" everywhere. It's the only way to fly!

But, again, the browser knows nothing of that. All it knows about are elements inside of DOM trees—whether built-in or custom.

This isn't an academic subject. Whether we're talking about islands architecture, "microfrontends", framework interop, or any other of the various techniques quickly becoming default approaches to ambitious website projects, there's one common denominator.

The days of "I build my sites using [Insert Framework]" are over. The idea of a global <div id="root"></div> and mouting the whole world inside of it is past its prime.

Frameworks should learn to live *inside* of web component-scoped trees.

You can learn how to build web components from scratch which will mount small framework-specific applications. But I'd recommend getting started first with an off-the-shelf solution. Something like <is-land>.

https://github.com/11ty/is-land

I personally would *never* reach for a frontend framework without first encapsulating it within something like this.

That's why I always scratch my head when people talk about a framework comsuming a web component now and then.

I'd flip that script on its head!

@jaredwhite this is all super interesting. I’d really like to get familiar with web components, but have mostly stuck with frameworks and meta frameworks.

If you were building a statically generated blog site that had some js driven experiences (like a rich text editor), how would you approach that?

@ThePaulMcBride At the risk of sounding like a broken record…

There's a web component for that!™️ 😆

@konnorrogers is working on a really cool one called Rhino Editor. https://rhino-editor.vercel.app/tutorials/getting-started

@justinfagnani wrapped CodeMirror in an elegant way:
https://github.com/justinfagnani/codemirror-elements

Any editor I might ever use, if they don't supply me with a WC directly, I'll write one to wrap it.