Web components

Web components were first introduced in 2011, although components were a part of
software development for many years prior to that. The standards necessary to
implement web components are being worked on by the W3C, and they represent the
future of web application development.
Without web components
When you develop front-end code, you are generally using some JavaScript framework,
and possibly some CSS, sprinkling it throughout your HTML, and hoping that some
subsequent CSS or JavaScript files don’t come along and change all the code you’ve
written.
Recently while working on a website, I found a JavaScript library that looked like
it provided a solution to an issue. I added the library and the CSS files to my
layout page, and got the functionality I wanted, with one nasty little side effect:
the CSS changed all my <p> tags to be text-align: center.
Front-end development becomes a matter of carefully combining JavaScript and CSS
libraries that hopefully don’t conflict with each other and produce the
functionality we are trying to implement.
Web components
Web components are essentially fully encapsulated HTML elements that the browser
knows how to display. Since the HTML and CSS are encapsulated in the component, the
component will always display the way it was designed, even if some later-loaded
CSS style sheet changes the presentation rules on HTML elements.
When you create an HTML page, you are defining the Document Object Model (DOM). The
DOM is a representation of your HTML (or XML, etc.) source code as a nested tree
structure. Browsers use various layout engines (such as WebKit or Gecko) to handle
parsing the HTML into a DOM. Once the DOM is built, JavaScript and CSS can
manipulate the DOM. If you’ve worked with jQuery or CSS, you’ve certainly seen
selectors such as # (ID) or . (class) to get particular DOM elements.