The document introduces web components, emphasizing their ability to help developers avoid the 'pyramid of doom' in HTML through features like custom elements, templates, HTML imports, and the shadow DOM. It notes that web components are fully supported by Chrome and Opera, and can be used in other browsers with polyfills. The document provides resources for further exploration and the author's contact information.

1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Introduction to Web Compoents
Ran Wahle
http://blogs.mocrosoft.co.il/ranw

2. HTML so far
Loosing the pyramid of doom
Custom Elements
Templates
HTML imports
Shadow DOM

3. HTML so far
Script tags in one area
CSS tags in another
HTML content in another

5. Custom Elements
Teaching the browser about new elements
Creating callbacks

6. Remember this?
<script type="text/template">
<div>
<h1>My template content</h1>
… some content …
</div>
</script>
Templates

7. HTML
<template id="template">
<div>
<h1>Web Components</h1>
<img src="http://webcomponents.org/img/logo.svg">
</div>
</template>
.
.
<div id="host"></div>
Templates

8. javascript
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
Templates

9. HTML Imports
#include on the web
New ‘link’ tag on the head part
You can host it anywhere in the file.

10. Shadow DOMs
Encapsulate styling
Separate content from presentation

11. Browser support (Current status, may 26th)

12. Can we start already?
Yes
You may implement web components in existing apps
You may use polyfills for old browsers

13. Summary
Web Components helps as loose the HTML pyramid of doom
Fully supported by Chrome and Opera
You may use it in other browsers with polyfill (webcomponnet.js).

14. Resources:
http://webcomponents.org
https://twitter.com/Web_Components
My blog: http://blogs.Microsoft.co.il/ranw

15. Questions

16. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Tank you
Ran Wahle
ranw@sela.co.il