Future CSS in Web Components

An introduction to Web Components and related changes to CSS. Given at CSSConf.eu on 13th September 2013

1. Future CSS in Web Components #CSSConf, 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 Fridge? (me not being a jerk)
10. Shadow DOM
11. Rendered but invisible in the DOM.
13. Make your own Shadow DOM
14. Shadow Host DOM Root 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. Shadow DOM <h1 /> <h2 /> <div id="foo"> Real DOM Shadow DOM Shadow Host
19. Ultimate Power!
20. A problem Shadow DOM CSS HTML
21. The problem <div class="foo"> … </div> div.foo { color: #f00; } <div class="foo"> … </div> .foo { color: #00f; }
22. The Solution Encapsulation
23. Encapsulation 1. It has all it needs. 2. Nothing gets in, nothing gets out.
24. Encapsulation in HTML <iframe src="foo.htm"> • Extra network requests • Multiple rendering contexts • CORS conflicts
25. Web Components Better encapsulation
26. Web Components: a set of emerging standards aimed at making reusable widgets.
27. Web Components: the biggest change to web dev since XMLHttpRequest.
28. Shadow DOM Templates Custom elements
29. Shadow DOM Templates Custom elements
30. Shadow DOM Templates Custom elements
31. Mustache & Handlebars <script id="foo" type="text/template"> <h2>Hello world!</h2> </script>
32. The template element <template id="foo"> <h2>Hello world!</h2> </template>
33. The markup is inert.
34. The template element <template id="foo"> <script src="foo.js"></script> <img src="foo.png"> </template>
35. The template element <template id="foo"> <h2>Hello world!</h2> </template> Content
36. The content object var clone = $(foo).content.cloneNode(true), bar = document.getElementById('bar'); bar.appendChild(clone);
37. Templates <div id="bar"> <h1>CSSConf.eu</h1> </div>
38. Templates <div id="bar"> <h1>CSSConf.eu</h1> <h2>Hello world!</h2> </div>
39. The markup is active.
40. Templates
41. <link rel="import" href="tmpls.html"> Templates
42. Templates
43. Shadow DOM Templates Custom elements
44. Custom Elements <div class="wunderbar"></div>
45. Custom Elements var wbar = document.register('wunder-bar'); <wunder-bar></wunder-bar>
46. Custom Elements <wunder-bar>…</wunder-bar> + shadow DOM + templates
47. Fully encapsulated & reusable
48. CSS (at last)
49. Hello Scope
50. <p>Hello</p> <div> <style> p { color: #f00; } </style> <p>World!</p> </div> <p>Again</p> Scoped styles
51. <p>Hello</p> <div> <style scoped> p { color: #f00; } </style> <p>World!</p> </div> <p>Again</p> Scoped styles
52. css = '<style>p { color: #f00; }</style>'; newRoot.appendChild(css); Shadow scope
53. The shadow boundary
54. The shadow boundary CSS
55. The shadow boundary CSS
56. .applyAuthorStyles newRoot = foo.createShadowRoot(); newRoot.applyAuthorStyles = true;
57. The shadow boundary CSS
58. The shadow boundary CSS
59. Pseudo-elements
60. Pseudo-elements <progress> <div>::-webkit-progress-bar <div>::-webkit-progress-value
61. The part attribute var newRoot = el.createShadowRoot(), newEl = '<h2 part="apes">…</h2>'; newRoot.appendChild(newEl);
62. The part attribute <div class="foo"> #document-fragment <h2 part="apes">Shadow world!</h2> </div> .foo::part(apes) { color: red; }
63. Custom Properties (variables)
64. body { var-highlight: #f00; } Custom properties h1 { color: var(highlight); }
65. body { var-highlight: #f00; } Custom properties .foo { var-highlight: #00f; }
66. Custom properties <div class="foo"> #document-fragment <style> h1 { color: var(highlight); } </style> </div> body { var-highlight: #f00; }
67. The Future?
68. Decorators
69. <decorator id="foo"> <template> <content /> <h2>Hello world!</h2> </template> </decorator> The decorator element
70. Decorators <h1>CSSConf.eu</h1> h1 { decorator: url(#foo); }
71. Decorators h1 { decorator: url(#foo); } <div> <h1>CSSconf.eu</h1> <h2>Hello world!</h2> </div>
72. Browser support
73. plus.google.com/+EricBidelman updates.html5rocks.com/tag/webcomponents Useful links polymer-project.org mozilla.github.io/brick customelements.io
74. 1. Web components provide reusability and encapsulation 2. Scope is coming to CSS In conclusion