Shadow DOM 101

Transcript

1. SHADOW DOM 101 Friday, July 12, 13

2. @odelaguila Friday, July 12, 13

3. Friday, July 12, 13

4. Wat? Friday, July 12, 13

5. Web Components Friday, July 12, 13

6. webcomponentsshift.com Friday, July 12, 13

7. Friday, July 12, 13

8. Friday, July 12, 13

9. can i has? Friday, July 12, 13

10. Friday, July 12, 13

11. polymer-project.org Friday, July 12, 13

12. Ejemplo Friday, July 12, 13

13. Chrome date input Friday, July 12, 13

14. 1 <input name="date" id="test" type="date"> Friday, July 12, 13

15. Friday, July 12, 13

16. 1 <input name="date" id="test" type="date"> Friday, July 12, 13

17. 1 <input name="date" id="test" type="date"> 2 #document-fragment 3 <div pseudo="-webkit-datetime-edit">

    4 <div pseudo="-webkit-datetime-edit-fields-wrapper"> 5 <span role="spinbutton" aria-valuetext="blank" aria-help="Month" aria-valuemin="1"... 6 mm 7 </span> 8 <div pseudo="-webkit-datetime-edit-text"> 9 / 10 </div> 11 <span role="spinbutton" aria-valuetext="blank" aria-help="Day" aria-valuemin="1"... 12 dd 13 </span> 14 <div pseudo="-webkit-datetime-edit-text"> 15 / 16 </div> 17 <span role="spinbutton" aria-valuetext="blank" aria-help="Year" aria-valuemin="1"... 18 yyyy 19 </span> 20 </div> 21 </div> 22 <div pseudo="-webkit-clear-button" style="visibility: hidden;"></div> 23 <div></div> 24 <div pseudo="-webkit-calendar-picker-indicator"></div> 25 </input> Friday, July 12, 13

18. 1 document.getElementById("test").childNodes 2 => [] Friday, July 12, 13

19. ¿Como? Friday, July 12, 13

20. 1 <div id="dom"> 2 <h1>My Title</h1> 3 <h2>My Subtitle</h2> 4

    <div> ...other content...</div> 5 </div> 1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.webkitCreateShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 </script> 1 <div id="dom"> 2 #document-fragment 3 <h2>Yay, ShadowDOM!</h2> 4 </div> html js rendered html Friday, July 12, 13

21. Styling Shadow DOM Friday, July 12, 13

22. 1 <div id="dom"> 2 <h1>My Title</h1> 3 <h2>My Subtitle</h2> 4

    <div> ...other content...</div> 5 </div> 5 <style> 6 html,body { 7 border: 0; 8 margin: 0; 9 padding: 0; 10 height: 100%; 11 width: 100%; 12 } 13 #dom { 14 background: lightblue; 15 color: black; 16 } 17 18 h2 { 19 font-size: 50px; 20 color : purple; 21 } 22 </style> html css Friday, July 12, 13

23. Friday, July 12, 13

24. 1 <div id="dom"> 2 <h1>My Title</h1> 3 <h2>My Subtitle</h2> 4

    <div> ...other content...</div> 5 </div> 1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 7 </script> 5 <style> 6 html,body { 7 border: 0; 8 margin: 0; 9 padding: 0; 10 height: 100%; 11 width: 100%; 12 } 13 #dom { 14 background: lightblue; 15 color: black; 16 } 17 18 h2 { 19 font-size: 50px; 20 color : purple; 21 } 22 </style> html js css Friday, July 12, 13

25. Friday, July 12, 13

26. estilos propios y herencia Friday, July 12, 13

27. estilos propios Friday, July 12, 13

28. 1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow

    = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.applyAuthorStyles = false; // default 6 </script> Friday, July 12, 13

29. 1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow

    = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.applyAuthorStyles = true; 6 </script> Friday, July 12, 13

30. Friday, July 12, 13

31. herencia Friday, July 12, 13

32. 1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow

    = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.resetStyleInheritance = false; // default 6 </script> Friday, July 12, 13

33. 1 <script> 2 var dom = document.querySelector('#dom'); 3 var shadow

    = dom.createShadowRoot(); 4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>'; 5 shadow.resetStyleInheritance = true; 6 </script> Friday, July 12, 13

34. @host css rule Friday, July 12, 13

35. 5 <style> 6 @host { 7 div { 8 background:

    red; 9 } 10 } 11 </style> css Friday, July 12, 13

36. Friday, July 12, 13

37. wrapup Friday, July 12, 13

38. js encapsulado Friday, July 12, 13

39. markup encapsulado Friday, July 12, 13

40. css encapsulado Friday, July 12, 13

41. css encapsulado Friday, July 12, 13

42. Recursos Friday, July 12, 13

43. * polymer-project.org * webcomponentsshift.com * html5rocks.com Friday, July 12, 13

44. Gracias :) Friday, July 12, 13