Part 2. Ways to improve your component workflow

Creating your own HTML element through the Custom Element API is pretty amazing. From the outside, it looks like any other tag on the page, but inside, it’s as complex or as simple as you need it to be! Now, though, it’s time to set our sights inward and dive deep on the workflow for creating a great Web Component. This is where we go beyond Custom Elements and explore the rest of the collection of standards that make up Web Components.

As with any new technology, Web Components suffered some missteps, as with the now-deprecated HTML Imports; but this part will take that misstep and break it down into relevant pieces you can go forward with that do have great support. We’ll compare one of those pieces, the template tag, with other ways of authoring your inner HTML and CSS to make up your component’s UI.

Finally, this part of this book ends with the most renowned Web Component feature: the Shadow DOM. Though not a required part of Web Components, it is a huge shift in how we work with the browser’s DOM. Creating a separate mini DOM just for your component is extremely powerful, as it removes frustrations that web developers have had for ages by creating a protective layer around your component where styles don’t accidentally creep in, and your inner elements aren’t tampered with via mistargeted JS.