Academy PRO: HTML5 API Introduction

Plan
1. Introduction. Web components
2. Storages and offline applications
3. Working with media
4. HTML5 Graphics

WEB Components
small parts of something great

Web components
1. Custom elements
2. Shadow DOM
3. Templating
4. HTML import

Custom elements
http://html5-demos.appspot.com/gangnam

Creating custom elements
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype)
});
var MegaButton = document.registerElement('mega-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
})

Cool and easy… deprecated feature
<element name="x-gangnam-style">
...
</element>
<element name="custom-button" extends="button">
...
</element>

Templates
<template>...</template>

HTML import
<link rel="import" href="/components/x-gangnam-style.html">
var link = document.querySelector('link[rel=import]');
var content = link.import.querySelector('#intro-dm');
document.body.appendChild(content.cloneNode(true));

What is shadow DOM?
<video src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" controls></video>

Why do we need it?
1. Encapsulation
2. Tempating
3. Stable DOM behaviour

How does it work?
Shadow Host (Element)
Shadow root
Contents

Let’s play!
http://codepen.io/anon/pen/ONJBoY
http://codepen.io/anon/pen/QNWZZb
http://codepen.io/anon/pen/MyWPNp
http://codepen.io/anon/pen/bpGQVE
http://codepen.io/jasonmayes/pen/HxEiv
http://html5-demos.appspot.com/shadowdom-visualizer

Usage
INSTEAD OF <element name="..."> USE <polymer-element name="...">

Other
https://customelements.io/
X-Tags от Mozilla

Academy PRO: HTML5 API Introduction

More Related Content

What's hot

Viewers also liked

Similar to Academy PRO: HTML5 API Introduction

More from Binary Studio

Recently uploaded

Academy PRO: HTML5 API Introduction