Academy PRO: HTML5 API Introduction
Download as PPTX, PDF0 likes224 views
The document outlines key features of HTML5, focusing on web components such as custom elements, shadow DOM, templates, and HTML imports. It provides examples of creating custom elements and explains the functionality of the shadow DOM for encapsulation and stable DOM behavior. Additionally, it highlights resources for further exploration of web components and suggests using Polymer for custom elements.
![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));](https://image.slidesharecdn.com/html5api-161025121920/85/Academy-PRO-HTML5-API-Introduction-10-320.jpg)
Academy PRO: HTML5 API Introduction
- 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
- 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>
- 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));
- 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?
- 21. Support
- 22. Polymer
- 23. Usage INSTEAD OF <element name="..."> USE <polymer-element name="...">