© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com

Introduction to Web Compoents

Ran Wahlehttp://blogs.mocrosoft.co.il/ranw

HTML so farLoosing the pyramid of doomCustom ElementsTemplatesHTML importsShadow DOM

HTML so far

Script tags in one areaCSS tags in anotherHTML content in another

Custom Elements

Teaching the browser about new elementsCreating callbacks

Remember this?

<script type="text/template"> <div> <h1>My template content</h1>

… some content … </div> </script>

Templates

HTML

<template id="template">

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

Templates

javascript

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

Templates

HTML Imports

#include on the webNew ‘link’ tag on the head partYou can host it anywhere in the file.

Shadow DOMs

Encapsulate styling Separate content from presentation

Browser support (Current status, may 26th)

Can we start already?

YesYou may implement web components in existing appsYou may use polyfills for old browsers

Summary

Web Components helps as loose the HTML pyramid of doomFully supported by Chrome and OperaYou may use it in other browsers with polyfill (webcomponnet.js).

Resources:

http://webcomponents.orghttps://twitter.com/Web_ComponentsMy blog: http://blogs.Microsoft.co.il/ranw

Questions

© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com

Tank you

Ran Wahleranw@sela.co.il