Custom element fundamentals

There's not a lot of agreement in the JavaScript framework world, but the one thing that everyone has largely taken for granted is that it's a Good Thing to be able to declare units of functionality — components — and then arrange them into HTML-ish markup. And for good reason: HTML is a clear and easy-to-understand language, and structuring your application this way tends to form a good abstraction over the actual page that the browser uses.

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.