Um futuro chamado Web Components

Um futuro chamado Web Components

BrazilJS 2013

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

August 22, 2013
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 8.
  5. 15.
  6. 17.
  7. 19.
  8. 21.
  9. 23.
  10. 25.
  11. 26.
  12. 27.
  13. 40.

    <brazil-js></brazil-js> usando JS var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function()

    { this.textContent = 'BrazilJS!'; }; document.register('brazil-js', { prototype: proto });
  14. 44.
  15. 46.
  16. 54.

    // 1. Acessa o conteúdo do template var t =

    document.querySelector('#meuTemplate').content; // 2. Manipula elemento interno do template t.querySelector('img').src = 'logo.png'; // 3. Clona e insere no DOM document.body.appendChild(t.cloneNode(true)); como usar?
  17. 60.

    estilo, marcação e script encapsulados <h1>Documento</h1> <div id=”cuia”></div> var cuia

    = document.querySelector('#cuia') .createShadowRoot(); cuia.innerHTML = '<h1>Mate</h1>' + '<style>h1 { color: #f00; }</style>';
  18. 62.
  19. 63.
  20. 64.
  21. 65.
  22. 66.
  23. 68.
  24. 70.
  25. 83.