Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Components & Shadow DOM

2,434 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web Components & Shadow DOM

  1. 1. WEB COMPONENTS ParisJS #16 — 29/02/12Thomas Bassetto — @tbassetto
  2. 2. ATTENTIONLes exemples de cette présentation sont peut-être déjà obsolètes.
  3. 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. 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. 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. 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. 7. DOJO<div dojoType="dijit.Calendar" value="2009-08-07" isDisabledDate="dojo.date.locale.isWeekend" onChange="..."></div>
  8. 8. WEB COMPONENTS• templates• decorators• custom elements• shadow DOM
  9. 9. <TEMPLATE>
  10. 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. 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 thetemplate.someElement.appendChild(t.content.cloneNode());
  12. 12. <DECORATOR>
  13. 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. 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. 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. 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. 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. 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. 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. 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. 21. <DECORATOR>.poem { decorator: url(#fade-to-white); font-variant: small-caps;}
  22. 22. <DECORATOR><div class="poem"> Two roads diverged in a yellow wood,<br> …</div>
  23. 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. 24. <ELEMENT>
  25. 25. <ELEMENT><element extends="button" name="x-fancybutton"> …</element>
  26. 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. 27. <ELEMENT><!-- definition --><element extends="button" name="x-fancybutton"> …</element><!-- use --><button is="x-fancybutton"> Show time</button>
  28. 28. <ELEMENT>var b = document.createElement("x-fancybutton");// will display <button is="x-fancybutton"></button>alert(b.outerHTML);
  29. 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. 30. SHADOW DOM
  31. 31. SHADOW DOM <input id="foo" type="range">var slider = document.getElementsById("foo"); console.log(slider.firstChild); // returns null
  32. 32. SHADOW DOM<audio src="/test/audio.ogg"></audio> audio * { border: 3px solid red; }
  33. 33. SHADOW DOM<div> <div class="stuff"> <content><!-- all children will appear here --></content> </div></div>
  34. 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. 35. SHADOW DOMExemple : http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-dom-example
  36. 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. 37. QUESTIONS ?
  38. 38. ONE MORE THING On recrute :)

×