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.
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.