The Component model for the web

1. <WEB-COMPONENTS>
The component model for the Web
@revathskumar

2. ABOUT
Rubyist / JavaScripter
Yeoman team member
Works at @whatznear
Blog at blog.revathskumar.com
Twitter/Github ­ @revathskumar
+RevathSKumar

3. ITS A JOURNEY INTO THE FUTURE

4. CONSISTS 4 PIECES
Templates
Custom Elements
Shadow DOM
Imports

5. TEMPLATES
markup intended to be used later

6. WHAT WE DO NOW?
<scriptid="indexTemplate"type="text/template">
</script>
<tr>
<td><imgsrc="/image/delete.png"/></td>
</tr></p>

7. WHAT IN FUTURE?
<templateid="indexTemplate">
<tr>
<td><imgsrc="/image/delete.png"/></td>
</tr>
</template>
varholder=document.getElementById('holder');
vartemplate=document.getElementById('indexTemplate');
templateContent=template.content.cloneNode(true);
holder.appendChild(temp);

8. CONTENTS IN <TEMPLATE>ARE
Parsed but not rendered
images won't be downloaded
Scripts are not processes
until you actually use it.

9. CAN I USE?

10. CUSTOM ELEMENTS
new type of DOM elements which can be defined by authors.

11. HOW TO DEFINE ONE?
document.registerElement
varp=Object.create(HTMLButtonElement.prototype);
varmyBtn=document.registerElement('my-btn',{
extends:'button',prototype:p
});

12. METHODS
varp=Object.create(HTMLButtonElement.prototype);
p.someMethod=function(){
//blahblah
}
varmyBtn=document.registerElement('my-btn',{
extends:'button',prototype:p
});

13. LIFECYCLE CALLBACKS
createdCallback ­­­> after created
attachedCallback ­­­> after inserted to document
detachedCallback ­­­> after removed from document
attributeChangedCallback ­­­> when an attribute added /
removed / changed

14. USING IN MARKUP
If using existsing tag
<buttonis='my-btn'></button>
If not related to any existing tag
<my-btn></my-btn>

15. EXTENDING
varp=Object.create(HTMLButtonElement.prototype);
varmyBtn=document.registerElement('my-btn',{
extends:'button',prototype:p
});
varmb=newmyBtn();
varanotherBtn=document.registerElement('another-btn',{
prototype:mb
});

16. SHADOW DOM
adjunct tree of DOM nodes

17. FEATURES
can be associated with an element, but do not appear as
child nodes
subtrees form their own scope
contains IDs and styles that overlap with IDs and styles in the
document
separate from the document

18. CAN I USE?

19. SHADOW HOST
An element with shadow DOM
Shadow DOM can be applied to an element by
createShadowRoot
the content of the shadow DOM is rendered instead the
element's children

20. INSERTION POINTS
host's children are displayed at the insertion point
use a element to specify insertion point.
does not change where the elements appear in DOM
"select" attribute lets you choose which children appear at
which insertion point
let you reordered or selectively omit rendering children

21. <!--document-->
<divid="news">
<h1>Gooddayforkittens</h1>
<divclass="breaking">Kittenrescuedfromtree</div>
<div>Areakitten"adorable"&mdash;owner</div>
<divclass="breaking">Jiggledpieceofyarnderailskittenkongress</div>
</div>
<!--#news'shadow-->
<templateid="t">
<contentselect="h1"></content>
<divid="ticker">
<contentid="stories"></content>
</div>
</template>

22. //SetupshadowDOM
varnews=document.querySelector('#news');
varr=news.createShadowRoot();
vart=document.querySelector('#t');
r.appendChild(t.content.cloneNode(true));
<divid="news">
<h1>Gooddayforkittens</h1>
<divid="ticker">
<divclass="breaking">Kittenrescuedfromtree</div>
<div>Areakitten"adorable"&mdash;owner</div>
<divclass="breaking">Jiggledpieceofyarnderailskittenkongress</div>
</div>
</div>

23. CAN I USE?

24. IMPORTS
Load custom elements from external files

25. Load using tag
<linkrel="import"href="goodies.html">
DOM available to script through the import property

26. THANK YOU.