A future called Web Components

E190023b66e2b8aa73a842b106920c93?s=47 Zeno Rocha
December 17, 2013

A future called Web Components

HTML5 LA

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

December 17, 2013
Tweet

Transcript

  1. 1.
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 7.
  7. 8.
  8. 9.
  9. 11.
  10. 12.
  11. 13.
  12. 16.
  13. 17.
  14. 18.
  15. 19.
  16. 20.
  17. 21.
  18. 22.
  19. 23.
  20. 24.
  21. 25.
  22. 26.
  23. 27.
  24. 28.
  25. 33.
  26. 36.
  27. 37.
  28. 40.
  29. 41.

    using JS <html5-la></html5-la> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function()

    { this.textContent = ‘HTML5 LA!'; }; document.register(‘html5-la', { prototype: proto });
  30. 43.
  31. 44.
  32. 45.

    how to use it? <polymer-element name=“html5-la" attributes="where"> <script> Polymer(‘html5-la', {

    where: ‘Santa Monica’, created: function() { // do something } }); </script> </polymer-element>
  33. 47.
  34. 50.
  35. 51.
  36. 54.
  37. 56.

    how to use it? // 1. Access template’s content var

    t = document.querySelector('#myTemplate').content; // 2. Manipulate internal element t.querySelector('img').src = 'logo.png'; // 3. Clone and append in the DOM document.body.appendChild(t.cloneNode(true));
  38. 57.
  39. 61.

    how to use it? <h1>Foo</h1> <div id=”elem”></div> var elem =

    document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = '<h1>Bar</h1>';
  40. 62.

    markup, style & script encapsulated <h1>Foo</h1> <div id=”elem”></div> var elem

    = document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = ‘<h1>Bar</h1>’ + ‘<style>h1 { color: red; }</style>’;
  41. 63.
  42. 64.
  43. 65.
  44. 67.
  45. 68.
  46. 69.
  47. 70.
  48. 72.
  49. 73.
  50. 74.
  51. 82.