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.
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 manually, for example with intersectionObserver when one of the island element `isIntersecting` : app.mount(element)
```typescript
```
Jared White (ResistanceNet ✊)
Pascal