Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future CSS in Web Components

9d9f17e37b751b9f83081ba3dd44bab4?s=47 Peter Gasston
September 13, 2013

Future CSS in Web Components

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

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

September 13, 2013
Tweet

Transcript

  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)

  9. None
  10. Shadow DOM

  11. Rendered but invisible in the DOM.

  12. None
  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