What problems are we solving?
Building a tab component on the web...
Web Components
Less code. Less confusion.
Custom Elements
define new HTML/DOM elements
Custom Elements
- declarative, readable
- meaningful HTML
- common way to extend -> reusable
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-activate', function() {
console.log(this.selected);
});
Templates
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
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
<polymer-element name='paper-tabs'>
…
</polymer-element>
usage
<paper-tabs>…</paper-tabs>
// document.createElement('paper-tabs');
vanilla js
document.registerElement('super-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
polymer
<polymer-element name='super-button' extends='button'>
…
</polymer-element>
usage
<button is='super-button'>…</button>
// document.createElement('button', 'super-button');
vanilla js
var shadow = el.createShadowRoot();
shadow.innerHTML = ""
+ "I'm a profile card
";
polymer
<polymer-element name='profile-card' noscript>
<template>
<link rel='stylesheet' href='styles.css'>
<h2>I’m a profile-card</h2>
</template>
</polymer-element>
Types of HTML Elements
Polymer's core elements
Paper elements
<paper-input>...</paper-input>
<paper-checkbox>...</paper-checkbox>
<paper-ripple>...</paper-ripple>
