<WEB-COMPONENTS>The component model for the Web 

@revathskumar

ABOUTRubyist / JavaScripterYeoman team memberWorks at @whatznearBlog at blog.revathskumar.comTwitter/Github ­ @revathskumar+RevathSKumar

 

ITS A JOURNEY INTO THE FUTURE

CONSISTS 4 PIECESTemplatesCustom ElementsShadow DOMImports

TEMPLATESmarkup intended to be used later

WHAT WE DO NOW?<script id="indexTemplate" type="text/template">

</script>

<tr> <td> <img src="/image/delete.png"/> </td> </tr></p>

WHAT IN FUTURE?<template id="indexTemplate" > <tr> <td> <img src="/image/delete.png"/> </td> </tr></template>

var holder = document.getElementById('holder'); var template = document.getElementById('indexTemplate');

templateContent = template.content.cloneNode(true); holder.appendChild(temp);

CONTENTS IN <TEMPLATE> ARE

Parsed but not renderedimages won't be downloadedScripts are not processes

until you actually use it.

CAN I USE?

CUSTOM ELEMENTSnew type of DOM elements which can be defined by authors.

HOW TO DEFINE ONE?document.registerElement

var p = Object.create(HTMLButtonElement.prototype);var myBtn = document.registerElement('my-btn', { extends: 'button', prototype: p});

METHODSvar p = Object.create(HTMLButtonElement.prototype);p.someMethod = function(){ // blah blah}

var myBtn = document.registerElement('my-btn', { extends: 'button', prototype: p});

LIFECYCLE CALLBACKScreatedCallback ­­­> after createdattachedCallback ­­­> after inserted to documentdetachedCallback ­­­> after removed from documentattributeChangedCallback ­­­> when an attribute added /removed / changed

USING IN MARKUPIf using existsing tag

<button is='my-btn'></button>

If not related to any existing tag<my-btn></my-btn>

EXTENDINGvar p = Object.create(HTMLButtonElement.prototype);var myBtn = document.registerElement('my-btn', { extends: 'button', prototype: p});

var mb = new myBtn();var anotherBtn = document.registerElement('another-btn', { prototype: mb});

SHADOW DOMadjunct tree of DOM nodes

FEATUREScan be associated with an element, but do not appear aschild nodessubtrees form their own scopecontains IDs and styles that overlap with IDs and styles in thedocumentseparate from the document

CAN I USE?

SHADOW HOSTAn element with shadow DOMShadow DOM can be applied to an element by

createShadowRoot

the content of the shadow DOM is rendered instead theelement's children

INSERTION POINTShost's children are displayed at the insertion pointuse a element to specify insertion point.does not change where the elements appear in DOM"select" attribute lets you choose which children appear atwhich insertion pointlet you reordered or selectively omit rendering children

<!-- document --><div id="news"> <h1>Good day for kittens</h1> <div class="breaking">Kitten rescued from tree</div> <div>Area kitten "adorable"&mdash;owner</div> <div class="breaking">Jiggled piece of yarn derails kitten kongress</div></div>

<!-- #news' shadow --><template id="t"> <content select="h1"></content> <div id="ticker"> <content id="stories"></content> </div></template>

// Set up shadow DOMvar news = document.querySelector('#news');var r = news.createShadowRoot();var t = document.querySelector('#t');r.appendChild(t.content.cloneNode(true));

<div id="news"> <h1>Good day for kittens</h1> <div id="ticker"> <div class="breaking">Kitten rescued from tree</div> <div>Area kitten "adorable"&mdash;owner</div> <div class="breaking">Jiggled piece of yarn derails kitten kongress</div> </div></div>

CAN I USE?

IMPORTSLoad custom elements from external files

Load using tag<link rel="import" href="goodies.html">

DOM available to script through the import property

THANK YOU.