Academy PRO: HTML5 API Introduction
-
Upload
binary-studio -
Category
Software
-
view
136 -
download
2
Transcript of 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