Componentize The Web

Web Components?

What problems are we solving?

Building a tab component on the web...


Web Components

Less code. Less confusion.


Just stunning!

What are Web Components?

Custom Elements

define new HTML/DOM elements

Custom Elements

  • declarative, readable
  • meaningful HTML
  • common way to extend -> reusable
Tab 1 Tab 2 Tab 3
var tabs = document.querySelector('paper-tabs'); tabs.addEventListener('core-activate', function() { console.log(this.selected); });


native client-side templating

HTML Templates

  • use DOM to scaffold DOM
  • parsed, not rendered
  • content is inert until cloned/used
  • doc fragment - not part of the page

Shadow DOM

DOM/CSS scoping

Shadow DOM

<video src="foo.webm" controls></video>

HTML Imports

loading web components

HTML Imports

<link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="fonts.css"> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="bootstrap-tooltip.js"></script> <script src="bootstrap-dropdown.js"></script>
<link rel="import" href="bootstrap.html">

Web Component building blocks

  • Custom Elements

  • HTML Templates

  • Shadow DOM

  • HTML Imports

Browser Support

Summer 2014

Polyfills Web Components

Adds syntactic sugar

Gives comprehensive set of UI Components

Browser Support with Polymer

Summer 2014

Sugaring: Custom Elements

vanilla js
document.registerElement('paper-tabs', { prototype: Object.create(HTMLElement.prototype) });
<polymer-element name='paper-tabs'> … </polymer-element>
<paper-tabs>…</paper-tabs> // document.createElement('paper-tabs');
vanilla js
document.registerElement('super-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button' });
<polymer-element name='super-button' extends='button'> … </polymer-element>
<button is='super-button'>…</button> // document.createElement('button', 'super-button');

Sugaring: Templates

vanilla js
var shadow = el.createShadowRoot(); shadow.innerHTML = "" + "

I'm a profile card

<polymer-element name='profile-card' noscript> <template> <link rel='stylesheet' href='styles.css'> <h2>I’m a profile-card</h2> </template> </polymer-element>

Thinking in components

Types of HTML Elements

Polymer's core elements

Paper elements


Join The Revolution!