Custom element fundamentals
These framework components are only an abstraction, however. Inspecting a React or Vue application in a stock browser, you'll only see the rendered markup from the component templates, not the component "elements" themselves or their state. In order to see the page the way the framework sees it, you'll need to install an add-on for the developer tools that can translate back into its pre-compiled form — like a reverse version of the sunglasses from They Live.
The custom elements API also lets us build components that we can organize into an HTML tree, with one crucial difference: these aren't abstractions, but actual elements that the browser renders directly. They can be inspected without special tooling, and created or altered using the same DOM methods that you would use on an ordinary <div> or <img>.
It also has some drawbacks, as we'll see: integrating into the DOM means taking on some of its flaws. But its advantages — interoperability not just with other custom elements, but with framework code as well — make it a powerful tool at the heart of the web component concept.