Web Components

Web Components is a cutting-edge technology in development right now, and there still isn't complete native support by some browsers (Firefox, for example). It defines three major parts that are necessary to build and use isolated components: Shadow DOM, Custom Elements, and HTML Imports.

Note

In addition, we'll use the template tag, which used to be part of the Web Components specification but has been moved to the HTML5 specification instead.

Shadow DOM

The basic problem with including third-party HTML and CSS into your page is that it's not encapsulated. Your CSS styles can modify included HTML elements and vice versa. This also includes overlapping element IDs, classes, and so on.

With Shadow DOM, you can create an encapsulated DOM tree, which is isolated from the rest of the DOM.

Custom Elements

The HTML specification contains a predefined number of tags that you can use. With Custom Elements, you can extend this set with your own tags that can contain HTML fragments and add...