My slides from devoxx-2014 on web components

1. Web Components
A revolution ?
@cbalit 0

2. Why components ?
This is the way we already do it
For widgets ? applications ? pluggins ?
Reusable
Encapsulated
Extendable

3. What is it ?
4 specifications
1. Html Import
2. Shadow Dom
3. Template
4. Custom Element

4. Html Import

5. What is it ?
Include an HTML element inside another one

6. How ?
<link rel="import" href="/path/myfile.html">
CORS
Load once
Don't block page parsing

7. Get the content
HTML and CSS are just loaded but not included (available) We
retrieve the content using the import property
<link id="my-import" rel="import" href="myfile.html">
<script>
var link = document.querySelector('#my-import');
var content = link.import;
//I can now acces to my content
var el = content.querySelector('.mySelector');
document.body.appendChild(el.cloneNode(true));
</script>

8. And for Javascript ...
Run in the page context
Can access to its DOM ...
... and the one from the page
<script>
var importDoc = document.currentScript.ownerDocument;
var mainDoc = document;
</script>

9. Events
Load and Error Event
<script async="">
function handleLoad(e) {
console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
console.log('Error loading import: ' + e.target.href);
}
</script>
<link rel="import" href="file.html" onload="handleLoad(event)" onerror="handleError(event)"

10. Support

11. Shadow Dom

12. Old !!!!
Browsers already use it
<input type="range">
<input type="date">
<input type="hour">
jj/mm/aaaa

13. What is it ?
It's all about Encapsulation

14. What does this mean
Isolated container
New kind of node
shadow root
shadow host

15. With Javascript
createShadowRoot
element.shadowRoot
<button>Normal button!</button>
<button id="myBtn">Hello, world!</button>
<script>
var host = document.querySelector('#myBtn');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
Normal button! こんにちは、影の世界!

16. Shadow DOM versus Light
DOM
<my-element>
<span>Hello</span>
</my-element>
visible sub-tree (childNodes, children, innerHTML ...)
internal node
composed DOM: what the browser see and render

17. Insertions points
Define render area in the shadow dom
No logical link
<div id="host">
<span class="title">Hello too</span>
<span>Bla Bla Bla</span>
</div>
<script>
var shadow = document.querySelector('#host').createShadowRoot();
shadow.innerHTML = '<h1>In Shadow</h1>' +
'<h2><content select=".title"></content></h2>' +
'<section><content select="*"></content></section>';
</script>

18. Support

19. Template

20. What is it ?
Reusable DOM template

21. Not in the document
No side effect
DOM not rendered
Script not parsed
Image not loaded

22. Usage
1. Get the template with a selector
2. acces to the content with the content property
3. clone: he's alive
4. insert the clone element in the page

23. Exemple
<template id="mytemplate">
<img src="img/templates_64x64.png" alt="great image">
<div id="comment">My new comment</div>
</template>
<script>
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'img/templates_64x64.png';
t.content.querySelector('#comment').innerHTML = 'My new comment';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
</script>
My new comment

24. Support

25. Custom element

26. What is it ?
Define new HTML element
Extend existing elements

27. How ?
registerElement
a name (with a -)
a prototype (HTMLElement by default)
<script>
</script>
<my-elt></my-elt>
var myElt = document.registerElement('my-elt',HTMLElement.prototype);

28. Extend existing elements
<script>
var myButton = document.registerElement('my-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
</script>
<button is="”my-button”"></button>

29. Lifecycle
Declaration vs register
Seen as unresolved
pseudo-selector :unresolved
<style>
*:unresolved {
color: red;
}
</style>
<my-element>register</my-element>
<button onclick="document.registerElement('my-element')">Register</button>
i'm unresolved Register

30. Callback
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback
var myElemtProto = Object.create(HTMLElement.prototype);
myElemtProto.createdCallback = function() {};
var myElemt = document.registerElement('my-element', myElemtProto);

31. Add content

32. innerHTML
myEltProto.createdCallback = function() {
this.innerHTML = "<b>un peu de contenu!</b>";
};

33. shadowDom
myEltProto.createdCallback = function() {
var shadow = this.createShadowRoot();
shadow.innerHTML = "<b>un peu de contenu!</b>";
};

34. Template
<template id="sdtemplate">
</template>
myEltProto.createdCallback = function() {
var t = document.querySelector('#sdtemplate');
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
};

35. Add code

36. The prototype
myEltProto.myFctn=function(){...}
Object.defineProperty(myEltProto, "bar", {value: 5});

37. Support

38. And so what ?

39. Real good specification
Can be used alone
But a weak support
So what can we do ?

40. POLYMER
polyfills (platform.js)
components (core-elements, paper-elements)
sugaring (polymer.js)

41. X-TAG
Web Components Polyfills (custom element et HTMLImports)
X-Tag Custom Elements
X-Tag Core Library

42. BOSONIC
polyfills (platform.js)
components

43. Ressources Import
Shadow Dom
Styling Shadow Dom
Template
Custom Elements
The Web Component Ecosystem
Polymer
X-Tag
Bosonic
Credits: Eric Bidelman,Rob Dodson,Dominic Cooney

44. Thank you !!!
cbalit

45. My new comment