Web Components 101

What are Web Components?

Web Components are technologies that can help you create reusable custom elements to be used in your web apps. These technologies can be encapsulated away from the rest of your code, and help you make versatile custom elements.

Three Main Technologies

Custom Elements: These JavaScript APIs help to define custom elements and their behavior to be used in the user interface. This is particularly helpful when working on a team, so that everything stays the same across the board.
Shadow DOM: These JavaScript APIs are used for attaching an encapsulated "shadow" DOM tree to an element. This keeps an element's features private, so they can be scripted without colliding with other aspects of the document. Its also a way to make sure all the CSS rules can be kept the same.
HTML Templates: Both the and elements allow the coder to write markup templates that will not be displayed in the rendered page. They can be reused many times.