Introducing Web Components

SmartWeb conference, 24th September 2013.

Transcript

1. Introducing Web Components #Smartweb 09/13
2. Peter Gasston @stopsatgreen broken-links.com
3. Creative Technologist / Front-end lead rehabstudio.com
4. 1. Subject to change 2. There will be code Before we start
5. Web Components
6. The secret of Ultimate Power!
7. {demo}
8. What The Frigarui?
10. Shadow DOM
11. Rendered but invisible in the DOM.
13. Make your own Shadow DOM
14. Shadow Root DOM Host Cat Wars Etc
15. Shadow root var newRoot = $(foo).createShadowRoot(), newEl = '<h2>Shadow world!</h2>'; newRoot.innerHTML = newEl;
16. Shadow root <div id="foo"> <h1>Hello world!</h1> </div>
17. Shadow root <div id="foo"> <h1>Hello world!</h1> <h2>Shadow world!</h2> </div>
18. {demo}
19. Shadow DOM <h1 /> <h2 /> <div id="foo"> Real DOM Shadow DOM Shadow Host
20. Shadow root var shad = newRoot.shadowRoot; shad.querySelector('h2');
21. A DOM hidden inside the DOM.
22. Ultimate Power!
23. A problem Shadow DOM
25. .foo { color: #00f; } The problem <div class="foo"> … </div> div.foo { color: #f00; } <div class="foo"> … </div>
26. The Solution Encapsulation
27. Encapsulation 1. It has all it needs. 2. Nothing gets in, nothing gets out.
28. Encapsulation in HTML <iframe src="foo.htm"> • Extra network requests • Multiple rendering contexts • CORS conflicts
29. Web Components Better encapsulation
30. Web Components: a set of emerging standards aimed at making reusable widgets.
31. Web Components: the biggest change to web dev since XMLHttpRequest.
32. Shadow DOM Templates Custom elements
33. Shadow DOM Templates Custom elements
34. Shadow DOM Templates Custom elements
35. Mustache & Handlebars <script id="foo" type="text/template"> <h2>Hello world!</h2> </script>
36. The template element <template id="foo"> <h2>Hello world!</h2> </template>
37. The markup is inert.
38. The template element <template id="foo"> <script src="foo.js"></script> <img src="foo.png"> </template>
39. The template element <template id="foo"> <h2>Hello world!</h2> </template> Content
40. The content object var clone = $(foo).content.cloneNode(true), bar = document.getElementById('bar'); bar.appendChild(clone);
41. Templates <div id="bar"> <h1>SmartWeb</h1> </div>
42. Templates <div id="bar"> <h1>SmartWeb</h1> <h2>Hello world!</h2> </div>
43. The markup is active.
44. Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), clone = $(bar).content.cloneNode(true), newRoot.innerHTML = clone;
45. The content element <template> <div> <h2>Hello world!</h2> <content></content> </div> </template>
46. <p>Good morning, Bucharest!</p> The content element
47. <div> <h2>Hello world!</h2> <p>Good morning, Bucharest!</p> </div> The content element
48. Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), newEl = document.createElement('content'); newRoot.innerHTML = newEl;
49. Templates
50. <link rel="import" href="tmpls.html"> HTML Imports
51. Templates
52. Shadow DOM Templates Custom elements
53. Custom elements <div class="smartweb"></div>
54. Custom elements document.register('smart-web'); <smart-web></smart-web>
55. Custom elements + shadow DOM + templates <smart-web></smart-web>
56. Custom elements document.register('smart-web', { extends: 'button' }); <button is="smart-web">Go</button>
57. The element element <element name="smart-web"> <template> <style scoped>…</style> <button> #document-fragment <div>…</div> </button> </template> </element>
58. Fully encapsulated & reusable
59. Encapsulation Reusability Portability Shadow DOM Templates Custom elements
60. That’s it.
61. Styling the Shadow DOM
62. The shadow boundary
63. The shadow boundary CSS
64. The shadow boundary CSS
65. .applyAuthorStyles newRoot = foo.createShadowRoot(); newRoot.applyAuthorStyles = true;
66. The shadow boundary CSS
67. The shadow boundary CSS
68. Pseudo-elements
69. Pseudo-elements <progress> <div>::-webkit-progress-bar <div>::-webkit-progress-value
70. {demo}
71. The part attribute var newRoot = el.createShadowRoot(), newEl = '<h2 part="apes">…</h2>'; newRoot.appendChild(newEl);
72. The part attribute <div class="foo"> #document-fragment <h2 part="apes">Shadow world!</h2> </div> .foo::part(apes) { color: red; }
73. Scope
74. <p>Hello</p> <div> <style> p { color: #f00; } </style> <p>World!</p> </div> <p>Again</p> Scoped styles
75. <p>Hello</p> <div> <style scoped> p { color: #f00; } </style> <p>World!</p> </div> <p>Again</p> Scoped styles
76. css = '<style>p { color: #f00; }</style>'; newRoot.appendChild(css); Shadow scope
77. Custom properties (variables)
78. body { var-highlight: #f00; } Custom properties h1 { color: var(highlight); }
79. body { var-highlight: #f00; } Custom properties .foo { var-highlight: #00f; }
80. Custom properties <div class="foo"> #document-fragment <style> h1 { color: var(highlight); } </style> </div> body { var-highlight: #f00; }
81. The Future?
82. Decorators
83. The decorator element <template> <content /> <h2>Hello world!</h2> </template> <decorator id="foo"> </decorator>
84. Decorators <h1>Front End United</h1> h1 { decorator: url(#foo); } <div> <h2>Hello world!</h2> </div>
85. Shadow DOM Shadow DOM API Templates HTML imports Custom elements Scoped styles Custom properties Browser support
86. 86 Polymer project Polymer project
87. plus.google.com/+EricBidelman updates.html5rocks.com/tag/webcomponents Useful links polymer-project.org mozilla.github.io/brick customelements.io
88. Multumesc ’