Shadow DOM 101

lighting talk para el grupo de ruby-gdl en la reunion de julio 2013

Transcript

1. SHADOW
   DOM
   101
   Friday, July 12, 13
   

   View Slide

2. @odelaguila
   Friday, July 12, 13
   

   View Slide

3. Friday, July 12, 13
   

   View Slide

4. Wat?
   Friday, July 12, 13
   

   View Slide

5. Web
   Components
   Friday, July 12, 13
   

   View Slide

6. webcomponentsshift.com
   Friday, July 12, 13
   

   View Slide

7. Friday, July 12, 13
   

   View Slide

8. Friday, July 12, 13
   

   View Slide

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

   View Slide

10. Friday, July 12, 13
    

    View Slide

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

    View Slide

12. Ejemplo
    Friday, July 12, 13
    

    View Slide

13. Chrome date input
    Friday, July 12, 13
    

    View Slide

14. 1
    Friday, July 12, 13
    

    View Slide

15. Friday, July 12, 13
    

    View Slide

16. 1
    Friday, July 12, 13
    

    View Slide

17. 1
    2 #document-fragment
    3
    4
    5 6 mm
    7
    8
    9 /
    10
    11 12 dd
    13
    14
    15 /
    16
    17 18 yyyy
    19
    20
    21
    22
    23
    24
    25
    Friday, July 12, 13
    

    View Slide

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

    View Slide

19. ¿Como?
    Friday, July 12, 13
    

    View Slide

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

    View Slide

21. Styling
    Shadow DOM
    Friday, July 12, 13
    

    View Slide

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

    View Slide

23. Friday, July 12, 13
    

    View Slide

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

    View Slide

25. Friday, July 12, 13
    

    View Slide

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

    View Slide

27. estilos propios
    Friday, July 12, 13
    

    View Slide

28. 1 <br/>2 var dom = document.querySelector('#dom');<br/>3 var shadow = dom.createShadowRoot();<br/>4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>';<br/>5 shadow.applyAuthorStyles = false; // default<br/>6
    Friday, July 12, 13
    

    View Slide

29. 1 <br/>2 var dom = document.querySelector('#dom');<br/>3 var shadow = dom.createShadowRoot();<br/>4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>';<br/>5 shadow.applyAuthorStyles = true;<br/>6
    Friday, July 12, 13
    

    View Slide

30. Friday, July 12, 13
    

    View Slide

31. herencia
    Friday, July 12, 13
    

    View Slide

32. 1 <br/>2 var dom = document.querySelector('#dom');<br/>3 var shadow = dom.createShadowRoot();<br/>4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>';<br/>5 shadow.resetStyleInheritance = false; // default<br/>6
    Friday, July 12, 13
    

    View Slide

33. 1 <br/>2 var dom = document.querySelector('#dom');<br/>3 var shadow = dom.createShadowRoot();<br/>4 shadow.innerHTML = '<h2>Yay, ShadowDOM!</h2>';<br/>5 shadow.resetStyleInheritance = true;<br/>6
    Friday, July 12, 13
    

    View Slide

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

    View Slide

35. 5 <br/>6 @host {<br/>7 div {<br/>8 background: red;<br/>9 }<br/>10 }<br/>11
    css
    Friday, July 12, 13
    

    View Slide

36. Friday, July 12, 13
    

    View Slide

37. wrapup
    Friday, July 12, 13
    

    View Slide

38. js encapsulado
    Friday, July 12, 13
    

    View Slide

39. markup
    encapsulado
    Friday, July 12, 13
    

    View Slide

40. css
    encapsulado
    Friday, July 12, 13
    

    View Slide

41. css
    encapsulado
    Friday, July 12, 13
    

    View Slide

42. Recursos
    Friday, July 12, 13
    

    View Slide

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

    View Slide

44. Gracias :)
    Friday, July 12, 13
    

    View Slide