academy pro: html5 api introduction

HTML5 APIbinary-studio.com

Plan1.Introduction. Web components

2.Storages and offline applications

3.Working with media

4.HTML5 Graphics

WEB Componentssmall parts of something great

Web components1.Custom elements

2.Shadow DOM

3.Templating

4.HTML import

Custom elementshttp://html5-demos.appspot.com/gangnam

Creating custom elementsvar 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));

Shadow DOMhidden power

What is shadow DOM?

What is shadow DOM?

<video src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" controls></video>

How to find it?

Why do we need it?1.Encapsulation

2.Tempating

3.Stable DOM behaviour

How does it work?

Shadow Host (Element)

Shadow root

Contents

How does it work?

How does it work?

How does it work?

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

Support

Polymer

UsageINSTEAD OF <element name="..."> USE <polymer-element name="...">

Otherhttps://customelements.io/X-Tags от Mozilla