Web Components: Getting Started

An introduction to Web Components, starting with the Shadow DOM. Presented at State of the Browser 3, 20 April 2013. #sotb3

Transcript

1. Web Components: Getting Started #SOTB3, April '13
2. Peter Gasston @stopsatgreen broken-links.com
3. Creative Technologist rehabstudio.com (Yes, it's a real job)
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. Flip?
11. Shadow DOM
12. Shadow DOM <h1 /> <h2 /> <div id="foo"> Real DOM Shadow DOM Shadow Host
13. Rendered but invisible in the DOM.
15. Make your own Shadow DOM
16. Shadow root var el = document.getElementById('foo'), newRoot = el.createShadowRoot(), newEl = document.createElement('h2); newEl.textContent = 'Shadow world!'; newRoot.appendChild(newEl);
17. <div id="foo"> <h2>Shadow world!</h2> </div> Shadow root <div id="foo"> <h1>Hello world!</h1> </div>
18. {demo}
19. Shadow DOM <h1 /> <h2 /> <div id="foo"> Distributed Nodes
20. .getDistributedNodes() var newRoot = foo.createShadowRoot(), newEls = '<h1>OK</h1><content />', rootNodes = newRoot.querySelector('content') .getDistributedNodes(); console.log(rootNodes[1].textContent); <div id="foo"> <p>GO</p> </div> > GO
21. Ultimate Power!
22. The Shadow DOM API lets you see the man behind the curtain.
23. A problem Shadow DOM CSS HTML
24. The problem <div class="foo" /> .foo { color: #f00; } <div class="foo" /> .foo { color: #00f; } (^0_0^) (^_^;)
25. The Solution Encapsulation
26. Encapsulation 1. Everything the thing needs is contained within itself. 2. The thing doesn't interfere with things outside itself, and vice versa.
27. Encapsulation in HTML <iframe src="foo.htm" />
28. Web Components Better encapsulation
29. What are Web Components ?
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 Decorators
33. Shadow DOM Templates Custom elements Decorators
34. Mustache & Handlebars <script id="foo" type="text/template"> <h2>Hello world!</h2> </script>
35. The template element <template id="foo"> <h2>Hello world!</h2> </template> Content
36. This markup is inert.
37. The content object var foo = document.getElementById('foo'), bar = document.getElementById('bar'), clone = foo.content.cloneNode(true); bar.appendChild(clone);
38. Templates <div id="bar"> <h1>State of the Browser</h1> <h2>Hello world!</h2> </div> <div id="bar"> <h1>State of the Browser</h1> </div>
39. This markup is active.
40. {demo}
41. Templates
42. <link rel="import" href="tmpls.html"> Templates
43. The content element (insertion point) <template> <div> <content></content> <h2>Hello world!</h2> </div> </template>
44. The content element <h1>Front End United</h1> <div> <h1>Front End United</h1> <h2>Hello world!</h2> </div>
45. The select attribute <template> <h2>Hello world!</h2> <content select=".foo"></content> </template> <h3 class="foo">I'm foo</h3> <h3 class="bar">I'm bar</h3>
46. oldEl += document.createElement('content'); Shadow DOM
48. Scoped styles
49. Scoped styles <div> <style scoped> h1 { color: #f00; } </style> <h1>I am red</h1> </div> <h1>I am not</h1>
50. {demo}
51. <template> <div> <style scoped> h1 { color: #f00; } </style> <content></content> <h2>Hello world!</h2> </div> </template> Scoped styles
52. css = '<style>h1 { color: red; }</style>'; newRoot.appendChild(css); Shadow scope
53. The shadow boundary
54. .applyAuthorStyles newRoot = foo.createShadowRoot(); newRoot.applyAuthorStyles = true;
55. Pseudo-elements
56. Pseudo-elements <progress> <div>::-webkit-progress-bar <div>::-webkit-progress-value
57. {demo}
58. The pseudo attribute var newRoot = el.createShadowRoot(), newEl = document.createElement('h2'); newEl.pseudo = 'x-foo'; newEl.textContent = 'Shadow world!'; newRoot.appendChild(newEl);
59. The pseudo attribute <h2 pseudo="x-foo">Shadow world!</h2> #foo::x-foo { color: red; } <div id="foo">…</div>
60. {demo}
61. Shadow DOM Templates Custom elements Decorators
62. The element element <element extends="button" name="x-foo"> <template> <div> <style scoped>...</style> <content></content> </div> </template> </element>
63. Custom Elements <div> <style scoped>...</style> <button>Go</button> </div> <button is="x-foo">Go</button>
64. Rendered with the DOM & 'permanent'.
65. Shadow DOM Templates Custom elements Decorators
66. <decorator id="foo"> <template> <h1>Hello world!</h1> </template> </decorator> The decorator element
67. Decorators <h1>Front End United</h1> h1 { decorator: url(#foo); } <div> <h1>Front End United</h1> <h2>Hello world!</h2> </div>
68. Shadow DOM Templates Custom elements Decorators
69. Browser support
70. plus.google.com/+EricBidelman html5-demos.appspot.com/static/shadowdom-visualizer/index.html updates.html5rocks.com/tag/webcomponents broken-links.com Useful links x-tags.org
71. Ahem.