Web Components
Collection of new features
- Shadow DOM
- HTML Imports
- Custom Elements
- Templating
Shadow DOM
- HTML Imports
- Custom Elements
- Templating
Document Object Model
Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under shadow roots in the main DOM
HTML5 Video Player
HTML Imports
- Custom Elements
- Templating
- Shadow DOM
<link rel="import" href="import-file.html">Custom Elements
- Shadow DOM
- HTML Imports
- Templating
<cdd></cdd>
How?
http://customelements.io/
- Shadow DOM
- HTML Imports
- Custom Elements
Templating
<template id="profileTemplate">
<div class="profile">
<img src="" class="profile__img">
<div class="profile__name"></div>
<div class="profile__social"></div>
</div>
</template>Not rendered/downloaded until activated
For reusable chunks of html
Why?
- Recyclable widgets with APIs for configuration
- Style encapsulation using Shadow DOM
- Less frameworks
- Native support (faster)
Examples
<qr-code data="My data stored as a QR code."></qr-code>
<time is="relative-time" datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 </time>
- just now
- 30 seconds ago
- a minute ago
- 30 minutes ago
- an hour ago
- 20 hours ago
- a day ago
- 20 days ago
- on Apr 1, 2014
<github-card user="pazguille"></github-card>
When?
(polyfill)
Polymer FAQ:
Is Polymer production ready? We don’t think so, but if you’re the adventurous type you’re welcome to give it a try.