Creating Components

We began our journey back in Chapter 1, by starting to explore the Shadow DOM API and how we might use it to encapsulate code into a feature or component. We saw how easy it is to create simple examples that use nothing more than standard JavaScript, as well as cover some of the terms and functions available for use in this API. This is all good, but what about using it in a practical context? The best way to do this is by writing components (or features) – while this book is about the Shadow DOM API, it forms the basis for creating Web Components, such as those offered in the Lit web library at https://lit.dev/ . With that in mind, I will take you through two examples of practical use – the first is an alert dialog, and the second is a toggle switch. We'll see how to create the code, learn how to test these components, and how to package them for reuse by others in your team or further afield as published npm packages.