Lecture for Binary Studio Academy PRO course about HTML5 API by Bohdan Rusinka (JS developer at Binary Studio) binary-studio.com

1. HTML5 API
binary-studio.com

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

3. WEB Components
small parts of something great

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

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

7. 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'
})

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

9. Templates
<template>...</template>

10. 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));

11. Shadow DOM
hidden power

12. What is shadow DOM?

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

14. How to find it?

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

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

17. How does it work?

18. How does it work?

19. How does it work?

20. 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

21. Support

22. Polymer

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

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