Introduction

In the previous chapter, we learned about the techniques we can use to ensure we are writing in a well-supported standard. In this chapter, we will use many of these techniques to create web components – bits of UI that we can safely share across multiple web apps and sites.

The idea behind web components is that you, as a developer, are able to create a custom HTML element that is reusable.

To facilitate the reusability of the component, we need to be able to encapsulate the functionality or behavior of the component so that it doesn't pollute the rest of our code and, in turn, is not polluted by outside influences.

For example, we may want to create a web component that handles notifications or alert messages on a web page. To do this, we would want the colors for these messages to be consistent in all cases; perhaps we would add a red background for an error alert, a yellow background for an information alert, and green background for a successful...