Web Components?
What problems are we solving?
Building a tab component on the web...
Insane!
Web Components
Less code. Less confusion.
![](images/phone.png)
![](images/paper-tabs.gif)
Just stunning!
What are Web Components?
Custom Elements
define new HTML/DOM elements
![](images/gmail.png)
Custom Elements
- declarative, readable
- meaningful HTML
- common way to extend -> reusable
![](images/tabs-selected-example.png)
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
![](image.png)
Shadow DOM
DOM/CSS scoping
Shadow DOM
![](images/video.png)
![](images/video-dom.png)
HTML Imports
loading web components
HTML Imports
Web Component building blocks
Custom Elements
HTML Templates
Shadow DOM
HTML Imports
Browser Support
Summer 2014
![](images/browser-support-1.png)
Polyfills Web Components
Adds syntactic sugar
Gives comprehensive set of UI Components
Browser Support with Polymer
Summer 2014
![](images/browser-support-2.png)
Sugaring: Custom Elements
vanilla js
polymer
usage
vanilla js
polymer
usage
Sugaring: Templates
vanilla js
I'm a profile card
";polymer
![](images/polymer-graph.png)
Thinking in components
Types of HTML Elements
![](images/html-elements.png)
Polymer's core elements
![](images/core-elements.png)
Paper elements
![](images/paper-input.gif)
![](images/paper-checkbox2.gif)
![](images/paper-ripple2.gif)
![](images/paper-playground.gif)