Présentation sur la spéc. Web Components & Shadow DOM lors du meetup ParisJS de février 2012.

1. WEB COMPONENTS
ParisJS #16 — 29/02/12
Thomas Bassetto — @tbassetto

2. ATTENTION
Les exemples de cette présentation sont peut-être
déjà obsolètes.

3. LES ORIGINES
• HTML5:beaucoup de #header, #footer, .article =>
<header>, <footer>, <article>
• Nombreux composants (jQuery UI, Dojo, Ext JS,
etc.) => Web Components
• Précédentes tentatives : MSIE behaviors, XBL, XBL2
• http://www.w3.org/2008/webapps/wiki/
Component_Model_Use_Cases

4. AUJOURDHUI
• Comment bien séparer le code que l’on a écrit et
celui qui va l’utiliser ?
• Le(quasi-)seul moyen est d’utiliser des iframes
(ou svg:use)

5. YUI
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js">
</script>
<script type="text/javascript">
YUI().use('calendar', 'datatype-date', function(Y) {
var calendar = new Y.Calendar({
contentBox: "#mycalendar",
width:'340px',
showPrevMonth: true,
showNextMonth: true,
date: new Date(2011, 07, 01)}).render();
});
</script>

6. DOJO
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/
dojo.xd.js">
</script>
<script>
dojo.require("dijit.dijit");
dojo.require("dijit.Calendar");
dojo.ready(function() {
var c = new dijit.Calendar({
value: new Date(),
isDisabledDate: function(d) {
// ...
}
});
document.body.appendChild(c.domNode);
});
</script>

7. DOJO
<div dojoType="dijit.Calendar"
value="2009-08-07"
isDisabledDate="dojo.date.locale.isWeekend"
onChange="...">
</div>

8. WEB COMPONENTS
• templates
• decorators
• custom elements
• shadow DOM

9. <TEMPLATE>

10. <TEMPLATE>
• Contient du code qui sera utile plus tard
• Codeparsé, mais inerte: scripts non exécutés,
images non téléchargées, HTML non “rendu”

11. <TEMPLATE>
<template id="commentTemplate">
<div>
<img src="">
<div class="comment"></div>
…
</div>
</template>
var t = document.querySelector("#commentTemplate");
// Populate content and img[src] values in the
template.
someElement.appendChild(t.content.cloneNode());

12. <DECORATOR>

13. <DECORATOR>
• Permetd’améliorer ou de remplacer la
présentation d’éléments existants
• S’utilise
via CSS, comme tout élement de
présentation
• Permetd’utiliser du code HTML pour enrichir la
présentation !

14. <DECORATOR>
<decorator id="fade-to-white">
<template>
<div style="position: relative;">
<style scoped>
#fog {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 5em;
background: linear-gradient(
bottom, white 0%, rgba(255, 255, 255, 0) 100%);
}
</style>
<content></content>
<div id="fog"></div>
</div>
</template>
</decorator>

15. <DECORATOR>
<decorator id="fade-to-white">
<template>
<div style="position: relative;">
<style scoped>
#fog {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 5em;
background: linear-gradient(
bottom, white 0%, rgba(255, 255, 255, 0) 100%);
}
</style>
<content></content>
<div id="fog"></div>
</div>
</template>
</decorator>

16. <DECORATOR>
<decorator id="fade-to-white">
<template>
<div style="position: relative;">
<style scoped>
#fog {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 5em;
background: linear-gradient(
bottom, white 0%, rgba(255, 255, 255, 0) 100%);
}
</style>
<content></content>
<div id="fog"></div>
</div>
</template>
</decorator>

17. <DECORATOR>
<decorator id="fade-to-white">
<template>
<div style="position: relative;">
<style scoped>
#fog {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 5em;
background: linear-gradient(
bottom, white 0%, rgba(255, 255, 255, 0) 100%);
}
</style>
<content></content>
<div id="fog"></div>
</div>
</template>
</decorator>

18. <DECORATOR>
<decorator id="fade-to-white">
<template>
<div style="position: relative;">
<style scoped>
#fog {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 5em;
background: linear-gradient(
bottom, white 0%, rgba(255, 255, 255, 0) 100%);
}
</style>
<content></content>
<div id="fog"></div>
</div>
</template>
</decorator>

19. <DECORATOR>
<decorator id="fade-to-white">
<template>
<div style="position: relative;">
<style scoped>
#fog {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 5em;
background: linear-gradient(
bottom, white 0%, rgba(255, 255, 255, 0) 100%);
}
</style>
<content></content>
<div id="fog"></div>
</div>
</template>
</decorator>

20. <DECORATOR>
• L’élement<content> est l’endroit ou le contenu
de l’élement “décoré” (ses enfants) sera inséré
• Onapplique le décorateur avec la propriété
decorator et un ID

21. <DECORATOR>
.poem {
decorator: url(#fade-to-white);
font-variant: small-caps;
}

22. <DECORATOR>
<div class="poem">
Two roads diverged in a yellow wood,<br>
…
</div>

23. <DECORATOR>
<div class="poem" style="font-variant: small-caps;">
<div style="position: relative;">
Two roads diverged in a yellow wood,<br>
…
<div style="position: absolute; left: 0; …"></div>
</div>
</div>

24. <ELEMENT>

25. <ELEMENT>
<element extends="button" name="x-fancybutton">
…
</element>

26. <ELEMENT>
<element extends="button" name="x-fancybutton">
<template>
<style scoped>
div.fancy {
…
}
</style>
<div class="fancy">
<content></content>
<div id="t"></div>
<div id="l"></div>
<div id="b"></div>
<div id="r"></div>
</div>
</template>
</element>

27. <ELEMENT>
<!-- definition -->
<element extends="button" name="x-fancybutton">
…
</element>
<!-- use -->
<button is="x-fancybutton">
Show time
</button>

28. <ELEMENT>
var b = document.createElement("x-fancybutton");
// will display '<button is="x-fancybutton"></button>'
alert(b.outerHTML);

29. <ELEMENT>
• Uncustom element peut optionnellement écouter
quatre “lifecycle” callbacks:
• created
: appelé par le constructeur, avec une instace
ShadowRoot, créé depuis <template> s’il existe
• attributeChanged : quand un de ses attributs change
• inserted : quand il est inséré dans le document
• removed : une fois enlevé du document

30. SHADOW DOM

31. SHADOW DOM
<input id="foo" type="range">
var slider = document.getElementsById("foo");
console.log(slider.firstChild); // returns null

32. SHADOW DOM
<audio src="/test/audio.ogg"></audio>
audio * {
border: 3px solid red;
}

33. SHADOW DOM
<div>
<div class="stuff">
<content><!-- all children will appear here --></content>
</div>
</div>

34. SHADOW DOM
<div>
<!-- all h1.cool children here -->
<content select="h1.cool"></content>
<div class="cool">
<!-- all .cool children (except the ones that are h1.cool) -->
<content select=".cool"></content>
</div>
<div class="stuff">
<!-- all remaining children here -->
<content></content>
</div>
</div>

35. SHADOW DOM
Exemple : http://dvcs.w3.org/hg/
webcomponents/raw-file/tip/spec/shadow/
index.html#shadow-dom-example

36. CONCLUSION
• <style
scoped> et Shadow DOM déjà disponible
dans Chromium (désactivés par défaut)
• Spécification qui évolue très fréquement
• Mozilla
préfère attendre avant d’implémenter,
aucune idée pour les autres navigateurs

37. QUESTIONS ?

38. ONE MORE THING
On recrute :)