Web Components - Future of Web Development

Web Components allows developers to create reusable web components that can be shared with others and reuse in their own application. The Specs of Web Components are:

  1. Shadow DOM: Encapsulate the Sub DOMs and it's CSS
  2. HTML Templates: Reusable content and style information goes into templates
  3. Custom elements: To define new elements in HTML
  4. HTML Imports: Declarative loading of elements and resources

Right now Web Components are natively supported by Chrome, Opera, Safari and Firefox browsers. For IE and un-supported browsers application need to use webcomponents.js polyfills to use the new standard.

Polyfills use browser native support first if available. As the browsers mature, application gets the benefit of native implementations and no need to use the polyfills.

  • Shadow DOM:

    Shadow DOM is new web standard that gives application developers access to style and DOM scoping. In Shadow DOM, all the HTML and CSS are scoped to the host element. So the CSS styles that are defined inside a Shadow Root won't style the parent document and CSS styles defined in main document won't affect the host element.

    <!-- Main document element -->
    <div id="host"></div>
    <!-- Building Shadow DOM -->
    var host = document.querySelector('#host');
    var root = host.createShadowRoot(); // Create a Shadow Root
    var div = document.createElement('div');
    div.textContent = 'Shadow DOM Content';
    root.appendChild(div); // Append elements to the Shadow Root
    Main Document or DOM
    An element(Shadow host)
    Shadow Root
    Another element(Shadow host)
    Shadow Root

    Building Shadow DOM is simple as above. But in the above example adding contents to Shadow DOM is not declarative. The same can be done much simpler using Templates.

  • Templates:

    Using template element you can define the contents of your Shadow DOM using HTML using declarative way.

    <template id="my-panel"> <!-- Define template Element with id-->
        /* Shadow DOM styling */
        .panel { color: green; }
      <!-- template Content with other HTML or Custom elements-->
      <div class="mainContainer">
        <div class="panel">
           My Container Element using template
    <!-- Step 2: Now Add the template to main document -->
    <div id="host"> </div>
      var template = document.querySelector('#my-panel');
      var cloneContent = document.importNode(template.content, true); // Content of the template with deep Copy.
      var host = document.querySelector('#host');
      host.appendChild(cloneContent); // Append the copy of template Content to the host element.

    Template Data binding is not implemented in native template element. Template binding are additional features that are provided by Polymer project.

  • Custom Elements:

    Custom Elements allows easier component reuse across the web application. These are nothing but custom HTML tags. Building custom element is simple as below.

    <!-- Step 1: Register the new element -->
      var myElement = document.registerElement('my-panel');
    <!-- Step 2: Use the element whereever needed in the document -->
      <my-panel> </my-panel>

    To add new functionality to a custom element, first create a basic prototype object with HTMLElement.prototype argument and then add new functions as needed.

      // Step 1: Create a prototype object with basic HTML feature set.
      var proto = Object.create(HTMLElement.prototype);
      // Step 2: On Create append to the shadow DOM.
      proto.createdCallback = function() {
        var root = this.createShadowRoot();
        var template = document.querySelector('#my-panel');
        var clone = document.importNode(template.content, true);
      // Step 3: Register the new element with HTML feature set.
      var mainContainer = document.registerElement('my-panel', {
        prototype: proto
    <!-- Step 4: Use the element whereever needed in the document -->
        <h1> Panel heading 1 </h1>
        <div class='panel-body'> Panel Body inside custom element 1</div>
      <p> Some other info ... </p>
        <h1> Panel heading 2 </h1>
        <div class='panel-body'> Panel Body inside custom element 2</div>

    Use content element to do specific element selection within the custom element.
    Live Demo of Web Components

  • HTML Imports:

    HTML Imports allow the application to load the resources like JavaScript, CSS and Web Fonts. To load BootStrap simply import bootstrap.html as below. Use Vulcanize tool to concatenate the multiple HTML files into one.

    <!-- Importing bootstrap.html into main page index.html -->
    <!-- Index.html -->
    <link rel="import" href="html/bootstrap.html"> 
    <!-- bootstrap.html contains css or js files-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.theme.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  • Conclusion:

    • HTML Template, Shadow DOM, Custom Elements and HTML imports help you to build reusable UI components much easier.
    • Web Components that are supported natively are guaranteed to be faster. (If browser doesn't support, use webcomponents.js for polyfilling.)
    • Shadow DOM encapsulates sub DOM trees and the Style.
    • Live demo of Web Components with steps
    • Reference: WebComponents.org