Introducing Web Components

Front-end London one-day event, September 2013

Transcript

1. Introducing Web Components #FELOneDay 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
5. Web Components
6. The secret of Ultimate Power!
7. {demo}
8. What The FrontEndLondon?
10. Shadow DOM
11. Rendered but invisible in the DOM.
13. Make your own Shadow DOM
14. Shadow Root DOM Host Cat Wars
15. Shadow root var newRoot = $(foo).createShadowRoot(), newEl = '<h2>Shadow world!</h2>'; newRoot.innerHTML = newEl;
16. <div id="foo"> <h1>Hello world!</h1> </div> Shadow root
17. <div id="foo"> <h1>Hello world!</h1> <h2>Shadow world!</h2> </div> Shadow root
18. {demo}
19. Shadow DOM <h1 /> <h2 /> <div id="foo"> Real DOM Shadow DOM Shadow Host
20. A DOM hidden inside the DOM.
21. Ultimate Power!
22. A problem Shadow DOM
24. .foo { color: #00f; } The problem <div class="foo"> … </div> div.foo { color: #f00; } <div class="foo"> … </div>
25. The Solution Encapsulation
26. Encapsulation 1. It has all it needs. 2. Nothing gets in, nothing gets out.
27. Encapsulation 1. We run things, things don’t run we. 2. Don’t take nothing from nobody.
28. <iframe src="foo.htm"> • Extra network requests • Multiple rendering contexts • CORS conflicts • Generally a bit shit Encapsulation
29. Web Components Better encapsulation
30. a set of emerging standards aimed at making reusable widgets. Web Components:
31. the biggest change to web dev since XMLHttpRequest. Web Components:
32. Shadow DOM Templates Custom elements
33. Shadow DOM Templates Custom elements
34. Shadow DOM Templates Custom elements
35. Mustache, etc. <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>#FELOneDay</h1> </div>
42. Templates <div id="bar"> <h1>#FELOneDay</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 afternoon, London!</p> The content element <div> <h2>Hello world!</h2> </div>
47. Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), el = document.createElement('content'); newRoot.innerHTML = el;
48. Templates
49. <link rel="import" href="tmpls.html"> HTML Imports
50. HTML Imports var lnk = 'link[rel="import"]', impt = document.querySelector(lnk), tpl = lnk.import.getElementById('foo'), clone = tpl.content.cloneNode(true);
51. HTML Imports
52. Shadow DOM Templates Custom elements
53. Custom elements <div class="frontend"></div>
54. Custom elements document.register('front-end'); <front-end></front-end>
55. Custom elements + shadow DOM + templates <front-end></front-end>
56. Custom elements document.register('front-end', { extends: 'button' }); <button is="front-end">Go</button>
57. Custom element API var fe = Object.create( HTMLElement.prototype ); fe.foo = function() { // Something }; document.register('front-end', { prototype: fe });
58. The element element <element name="front-end"> <template> <style scoped>…</style> <button> #document-fragment <div>…</div> </button> </template> </element>
59. Fully encapsulated & reusable
60. Encapsulation Reusability Portability Shadow DOM Templates Custom elements
61. That’s basically it.
63. Appendix A: More about Encapsulation
64. The shadow boundary
65. The shadow boundary CSS & JS
66. The shadow boundary CSS & JS
67. Shadow root var shad = newRoot.shadowRoot; shad.querySelector('h2');
68. The shadow boundary CSS
69. .applyAuthorStyles newRoot = foo.createShadowRoot(); newRoot.applyAuthorStyles = true;
70. The shadow boundary CSS
71. Pseudo-elements
72. Pseudo-elements <progress> <div>::-webkit-progress-bar <div>::-webkit-progress-value
73. {demo}
74. The part attribute var newRoot = el.createShadowRoot(), newEl = '<h2 part="apes">…</h2>'; newRoot.appendChild(newEl);
75. Show me your parts <div class="foo"> #document-fragment <h2 part="apes">Shadow world!</h2> </div> .foo::part(apes) { color: red; }
76. Appendix B: Scope
77. <p>Hello</p> <div> <style> p { color: #f00; } </style> <p>World!</p> </div> <p>Again</p> Scoped styles
78. <p>Hello</p> <div> <style scoped> p { color: #f00; } </style> <p>World!</p> </div> <p>Again</p> Scoped styles
79. css = '<style>p { color: #f00; }</style>'; newRoot.appendChild(css); Shadow scope
80. Custom properties
81. (don’t call them variables)
82. body { var-highlight: #f00; } Custom properties h1 { color: var(highlight); }
83. Custom properties .foo { var-highlight: #00f; } body { var-highlight: #f00; }
84. Custom properties <div class="foo"> #document-fragment <style> h1 { color: var(highlight); } </style> </div> body { var-highlight: #f00; }
85. Almost done
86. Shadow DOM Shadow DOM API Templates HTML imports Custom elements Scoped styles Custom properties Browser support
87. 87 Polymer project Polymer project
88. Useful links polymer-project.org updates.html5rocks.com/tag/webcomponents plus.google.com/+EricBidelman mozilla.github.io/brick customelements.io
89. Peter Gasston @stopsatgreen broken-links.com