Web components

Create your own custom HTML elements

<input type="text"></input>

What is a web component ?

But Thats too simple !

<Video> Tag

<video width="320" height="240" controls="" data-paused-by-reveal="">
    <source src="https://www.dropbox.com/s/rnmumqc7k811i1p/IMG_7054.MOV?dl=1 " type="video/mp4">
</video>

What is a web component made of ?

Custom Elements
Shadow DOM
Templates
HTML Imports

Custom Elements

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

// Or use an anonymous class if you don't want a named constructor in current scope.
window.customElements.define('app-drawer', class extends HTMLElement {...});

<app-drawer></app-drawer>

Shadow DOM

customElements.define('fancy-tabs', class extends HTMLElement {
  constructor() {
    super(); // always call super() first in the ctor.

    // Attach a shadow root to <fancy-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
      <div id="tabs">...</div>
      <div id="panels">...</div>
    `;
  }
  ...
});

Isolated DOM
Scoped CSS

HTML Templates

<template id="mytemplate">
  <img src="" alt="great image">
  <div class="comment"></div>
</template>

Content is inert until activated
Content is considered not to be in the document.
Can be placed anywhere

Polymers

Data Binding
Templating

<template is="dom-repeat" items="{{employees}}">
        <div>First name: <span>{{item.first}}</span></div>
        <div>Last name: <span>{{item.last}}</span></div>
        <p></p>
</template>

Polymer 2

Improved interoperability
More standard ES6

Pros

Future of HTML
Follows the spec
Native support from chrome
Can be used in other frameworks (Theoretically)

Cons

1. Global Namespace

2. Browser Support

3. Community

4. Limited programming model

Who uses Polymer ?

https://github.com/Polymer/polymer/wiki/Who%27s-using-Polymer%3F

Youtube
Google Music
Chrome UI
OlaCabs