Why?

Here are the main benefits of web components …

More readable markup

Let’s have a look at a bootstrap dropdown component from their examples page. There’s a fair bit of noise here for a simple example.

<div class="dropdown">
  <button
    class="btn btn-default dropdown-toggle"
    type="button"
    id="dropdownMenu1"
    data-toggle="dropdown"
    aria-expanded="true"
  >
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Action</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Another action</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Something else here</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Separated link</a>
    </li>
  </ul>
</div>

Wouldn’t it be much cleaner and easier to read if the markup was as follows:

<bs-dropdown role="menu" aria-labelledby="dropdownMenu1">
  <bs-dropdown-item role="menuitem">Action</bs-dropdown-item>
  <bs-dropdown-item role="menuitem">Another action</bs-dropdown-item>
  <bs-dropdown-item role="menuitem">Something else here</bs-dropdown-item>
  <bs-dropdown-item role="menuitem">Separated link</bs-dropdown-item>
</bs-dropdown>

How about some of the markup from Gmail - how readable is this?

Standard way

For many years we have had the ability to create reusable web UI components. Server side technologies like ASP.NET gave us the ability to create server driven reusable controls. In more recent years, the flexibility of HTML, CSS and JavaScript has been leveraged to give us components like jQueryUI and Boostrap. However, the approaches and the consumption of these controls has differed from control vendor to control vendor. This means we waste time as developers in getting up to speed when using 3rd party web components. Web components gives us a standard approach which will hopefully mean the ramp up time when using 3rd party web components will be quicker.

So what are they?

Web components is an unbrella term for 4 new browser technologies …

Custom elements

Custom elements gives us the ability to create reusable and meaningful HTML elements like <bs-dropdown> in the above example. They can extend existing HTML elements, so, you could create <x-superbutton> that extends <button>.

Templates

Templates allows you to define HTML templates on the client. But why do we need this when libraries like Handlebars.js already lets us do this?

The key advantage that native templates bring is that inside the template, nothing runs or renders. Obviously this helps performance but it also protects the template from XSS risks.

Shadow DOM

Shadow DOM allows you to scope a web component. The reasons for scoping are to protect consumers of the component from accidentally styling bits of the component or stop the component accidentally styling other parts of the page. Native HTML controls such as <video> already use shadow DOM as you can see from the following markup.

Imports

Imports allows you to bundle the HTML, CSS and JavaScript for a web component into a single reusable package. So, in a web page, instead of referencing the HTML, CSS and JavaScript separately …

<script src="jquery.min.js"></script>
<script src="mycomponent.min.js"></script>
<link rel="stylesheet" href="mycomponent.min.css" />

… we can reference just a single HTML file …

<import rel="import" href="mycomponent.html" />

Can I use them today?

Are We Componentized Yet? gives great information on this. As we stand today, the good news is that we can use them in Chrome. However, it appears that IE and Safari still have a lot of work to do. You also need to bare in mind that all 4 specifications are still in working draft, so, things could change.

There are a number of libraries that we can use today that are alternatives to native web components. Two of the most popular ones are polymer and X-Tag. Both these libraries support all the modern browsers but only go back to IE10.