When we say "#WebComponents are just #HTML and the DOM", we don't mean that web components just render out HTML to the DOM.
That's what *every other component format does*. React, Solid, Svelte, Vue, etc. They are all JavaScript objects which sit *outside* the DOM, trying to peer into the DOM to make a change. Some do a better job of that than others.
That's not what web components do.
A custom element *is* a node within the DOM.
That gives it unique superpowers. Nothing else can top that.
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.
Jared White (ResistanceNet ✊)
Zach Leatherman