O documento apresenta as principais características da tecnologia Web Components: Shadow DOM, que encapsula estilos e marcação; Template, que permite reutilizar partes de DOM; e Custom Elements, que permite criar elementos HTML personalizados. Apresenta também HTML Imports, que carrega documentos externos, e demonstra como implementar Web Components com Polymer.

1. O Mágico Mundo
De
Web Components
@mteusortiz

2. @mteusortiz
/mateusortiz
Front-End Developer

5. Web Components

6. HTML5 é o Futuro?

8. O Futuro

10. <x-heart>
http://mateusortiz.github.io/x-heart/

12. Web Components
Shadow DOM
Template
Custom Elements
HTML Imports
Decorators

13. Custom
Elements

14. Antes com <element>
<element name="x-button" constructor="XBUTTON"
attributes="lg sm xs">
<!-- Content -->
</element>

15. Antes com <element>
<element name="x-button" extends="button">
<!-- Content -->
</element>

16. http://goo.gl/GWatuU

17. com JS
<my-widget></my-widget>
var WidgetProto = Object.create(HTMLElement.prototype);
!
WidgetProto.createdCallback = function() {
this.textContent = "BeltraoInTech";
};
!
var Widget = document.registerElement('my-widget', {
prototype: WidgetProto
});

18. Lifecycle Callbacks
createdCallback();
attachedCallback();
detachedCallback();
attributeChangedCallback();

19. Funciona no IE6

21. tpolymer-project.org

22. tx-tags.org

23. W3C standards platform polyfills
Template shadow dom HTML ImportsCustom Elements

24. Com Polymer
<polymer-element name="x-button" attributes="color">
<script>
Polymer('x-button', {
color: 'red',
created: function() {
// ...
}
});
</script>
</polymer-element>

25. Lifecycle Callbacks Polymer
created();
detached();
attributeChanged();
attached();

26. Template

27. Templates
são pedaços
inertes de DOM
que podem ser
reutilizados.

28. # GAMBIARRA
existe vários Templates para server-
side e client-side

29. <template>

30. como criar?
<template>
<p>BeltraoInTech...</p>
<img src="beltrao.png"/>
</template>

31. como usar?
var tmpl = document.querySelector("#template");
tmpl.content.querySelector("img").src = "dog.gif";
document.body.appendChild(tmpl.content.cloneNode(true));

32. Shadow
DOM

33. O SHADOW DOM
encapsula STYLE
e MARCAÇÃO.

34. <iframe>

35. Shadow Dom é a mesma tecnologia usada pelos
fabricantes de navegadores para implemetar as
tags como <video> e <textarea>.

37. tmas voltaram atrás

38. exemplo Shadow Dom
<div class="widget"></div>
var host = document.querySelector(".widget");
var root = host.createShadowRoot();
root.innerHTML = "<h1>Estou dentro da div</h1>";

39. Encapsula style, marcação e
script

40. HTML
Imports

41. t
importações carregar
documentos externos
em nossa página.

42. HTML Import
<link rel="import" href="beltra-tech.html">

44. Obrigado
TWITTER.COM/MTEUSORTIZ
GITHUB.COM/MATEUSORTIZ