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>
  1. Content is inert until activated
  2. Content is considered not to be in the document.
  3. Can be placed anywhere

Polymers

  1. Data Binding
  2. 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

  1. Future of HTML
  2. Follows the spec
  3. Native support from chrome 
  4. 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

 

  1. Youtube
  2. Google Music
  3. Chrome UI
  4. OlaCabs

Web components

By Abhik Mitra

Made with Slides.com

Web components

  • 752

More from Abhik Mitra