Part 1. First steps

You’ve probably been hearing more and more about Web Components lately. Much of this has to do with all the major, modern browsers now supporting them in recent months. This includes Microsoft Edge, because you can already download a developer preview while we wait for the official Chromium-backed release. It can get a bit confusing when you look deeper to see what Web Components actually are, though!

Not only has the collection of standards that make up Web Components changed a little over time, but, in reality, a Web Component can be created with Custom Elements alone! You can create your very own element that sits on your HTML page just like any other browser-provided one. More importantly, by using the Custom Element API, your element can be given custom logic to be a made a fully featured, tiny interactive component that looks simple from the outside and can work together with any other element on the page.

The first part of this book will zero in on how to create your first custom elements, as well as explore some best practices around them. At the end of the first part, even just exploring this one concept, you’ll be making Web Components that are actually useful in real-world situations, even allowing them to be wrapped up as a single piece managing its own dependencies, perhaps including other nested Web Components, ready to be dropped onto an HTML page.