Your SlideShare is downloading. ×
Web Components & Shadow DOM
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Components & Shadow DOM

1,812

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,812
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WEB COMPONENTS ParisJS #16 — 29/02/12Thomas Bassetto — @tbassetto
  • 2. ATTENTIONLes 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 thetemplate.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 DOMExemple : 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 :)

×