$30 off During Our Annual Pro Sale. View Details »

Shadow DOM 101

Shadow DOM 101

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

Orlando Del Aguila

July 11, 2013
Tweet

More Decks by Orlando Del Aguila

Other Decks in Programming

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