Devoxx 2014-webComponents

Web ComponentsA revolution ?

@cbalit0

Why components ?This is the way we already do itFor widgets ? applications ? pluggins ?ReusableEncapsulatedExtendable

What is it ?4 specifications

1. Html Import2. Shadow Dom3. Template4. Custom Element

Html Import

What is it ?Include an HTML element inside another one

How ?<link rel="import" href="/path/myfile.html">

CORSLoad onceDon't block page parsing

Get the contentHTML 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>

</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));

And for Javascript ...Run in the page contextCan access to its DOM ...... and the one from the page

<script>

</script>

var importDoc = document.currentScript.ownerDocument; var mainDoc = document;

EventsLoad and Error Event

<script async="">

</script>

<link rel="import" href="file.html" onload="handleLoad(event)" onerror="handleError(event)"

function handleLoad(e) { console.log('Loaded import: ' + e.target.href); } function handleError(e) { console.log('Error loading import: ' + e.target.href); }

Support

Shadow Dom

Old !!!!Browsers already use it

<input type="range"><input type="date"><input type="hour">

jj/mm/aaaa

What is it ?It's all about Encapsulation

What does this meanIsolated containerNew kind of nodeshadow rootshadow host

With JavascriptcreateShadowRootelement.shadowRoot

<button>Normal button!</button><button id="myBtn">Hello, world!</button><script>

</script>

var host = document.querySelector('#myBtn'); var root = host.createShadowRoot(); root.textContent = 'こんにちは、影の世界!';

Normal button! こんにちは、影の世界!

Shadow DOM versus LightDOM

<my-element> <span>Hello</span></my-element>

visible sub-tree (childNodes, children, innerHTML ...)internal nodecomposed DOM: what the browser see and render

Insertions pointsDefine render area in the shadow domNo 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>

Support

Template

What is it ?Reusable DOM template

Not in the documentNo side effect

DOM not renderedScript not parsedImage not loaded

Usage1. Get the template with a selector2. acces to the content with the content property3. clone: he's alive4. insert the clone element in the page

Exemple<template id="mytemplate"> <img src="img/templates_64x64.png" alt="great image"> <div id="comment">My new comment</div></template><script>

</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);

My new comment

Support

Custom element

What is it ?Define new HTML elementExtend existing elements

How ?registerElementa name (with a -)a prototype (HTMLElement by default)

<script>

</script>

<my-elt></my-elt>

var myElt = document.registerElement('my-elt',HTMLElement.prototype);

Extend existing elements

<script>

</script>

<button is="”my-button”"></button>

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

LifecycleDeclaration vs register

Seen as unresolved

pseudo-selector :unresolved

<style>

</style><my-element>register</my-element><button onclick="document.registerElement('my-element')">Register</button>

*:unresolved { color: red; }

i'm unresolved Register

CallbackcreatedCallbackattachedCallbackdetachedCallbackattributeChangedCallback

var myElemtProto = Object.create(HTMLElement.prototype);

myElemtProto.createdCallback = function() {};

var myElemt = document.registerElement('my-element', myElemtProto);

Add content

innerHTML

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

shadowDom

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

Template

<template id="sdtemplate">

</template>

myEltProto.createdCallback = function() {var t = document.querySelector('#sdtemplate');var clone = document.importNode(t.content, true);this.createShadowRoot().appendChild(clone);};

Add code

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

Support

And so what ?

Real good specificationCan be used alone

But a weak support

So what can we do ?

POLYMER

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

X-TAG

Web Components Polyfills (custom element et HTMLImports)X-Tag Custom ElementsX-Tag Core Library

BOSONIC

polyfills (platform.js)components

RessourcesImportShadow DomStyling Shadow DomTemplateCustom ElementsThe Web Component EcosystemPolymerX-TagBosonic

Credits: , ,Eric Bidelman Rob Dodson Dominic Cooney

Thank you !!!cbalit

My new comment