Introducing Web Components

Transcript

1. 1.

   Introducing Web Components #Smartweb 09/13

2. 2.

   Peter Gasston @stopsatgreen broken-links.com

3. 3.

   Creative Technologist / Front-end lead rehabstudio.com

4. 4.

   1. Subject to change 2. There will be code Before

   we start
5. 5.

   Web Components

6. 6.

   The secret of Ultimate Power!

7. 7.

   {demo}

8. 8.

   What The Frigarui?

9. 9.

   None
10. 10.

    Shadow DOM

11. 11.

    Rendered but invisible in the DOM.

12. 12.

    None
13. 13.

    Make your own Shadow DOM

14. 14.

    Shadow Root DOM Host Cat Wars Etc

15. 15.

    Shadow root var newRoot = $(foo).createShadowRoot(), newEl = '<h2>Shadow world!</h2>';

    newRoot.innerHTML = newEl;
16. 16.

    Shadow root <div id="foo"> <h1>Hello world!</h1> </div>

17. 17.

    Shadow root <div id="foo"> <h1>Hello world!</h1> <h2>Shadow world!</h2> </div>

18. 18.

    {demo}

19. 19.

    Shadow DOM <h1 /> <h2 /> <div id="foo"> Real DOM

    Shadow DOM Shadow Host
20. 20.

    Shadow root var shad = newRoot.shadowRoot; shad.querySelector('h2');

21. 21.

    A DOM hidden inside the DOM.

22. 22.

    Ultimate Power!

23. 23.

    A problem Shadow DOM

24. 24.

    None
25. 25.

    .foo { color: #00f; } The problem <div class="foo"> …

    </div> div.foo { color: #f00; } <div class="foo"> … </div>
26. 26.

    The Solution Encapsulation

27. 27.

    Encapsulation 1. It has all it needs. 2. Nothing gets

    in, nothing gets out.
28. 28.

    Encapsulation in HTML <iframe src="foo.htm"> • Extra network requests •

    Multiple rendering contexts • CORS conflicts
29. 29.

    Web Components Better encapsulation

30. 30.

    Web Components: a set of emerging standards aimed at making

    reusable widgets.
31. 31.

    Web Components: the biggest change to web dev since XMLHttpRequest.

32. 32.

    Shadow DOM Templates Custom elements

33. 33.

    Shadow DOM Templates Custom elements

34. 34.

    Shadow DOM Templates Custom elements

35. 35.

    Mustache & Handlebars <script id="foo" type="text/template"> <h2>Hello world!</h2> </script>

36. 36.

    The template element <template id="foo"> <h2>Hello world!</h2> </template>

37. 37.

    The markup is inert.

38. 38.

    The template element <template id="foo"> <script src="foo.js"></script> <img src="foo.png"> </template>

39. 39.

    The template element <template id="foo"> <h2>Hello world!</h2> </template> Content

40. 40.

    The content object var clone = $(foo).content.cloneNode(true), bar = document.getElementById('bar');

    bar.appendChild(clone);
41. 41.

    Templates <div id="bar"> <h1>SmartWeb</h1> </div>

42. 42.

    Templates <div id="bar"> <h1>SmartWeb</h1> <h2>Hello world!</h2> </div>

43. 43.

    The markup is active.

44. 44.

    Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), clone =

    $(bar).content.cloneNode(true), newRoot.innerHTML = clone;
45. 45.

    The content element <template> <div> <h2>Hello world!</h2> <content></content> </div> </template>

46. 46.

    <p>Good morning, Bucharest!</p> The content element

47. 47.

    <div> <h2>Hello world!</h2> <p>Good morning, Bucharest!</p> </div> The content element

48. 48.

    Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), newEl =

    document.createElement('content'); newRoot.innerHTML = newEl;
49. 49.

    Templates

50. 50.

    <link rel="import" href="tmpls.html"> HTML Imports

51. 51.

    Templates

52. 52.

    Shadow DOM Templates Custom elements

53. 53.

    Custom elements <div class="smartweb"></div>

54. 54.

    Custom elements document.register('smart-web'); <smart-web></smart-web>

55. 55.

    Custom elements + shadow DOM + templates <smart-web></smart-web>

56. 56.

    Custom elements document.register('smart-web', { extends: 'button' }); <button is="smart-web">Go</button>

57. 57.

    The element element <element name="smart-web"> <template> <style scoped>…</style> <button> #document-fragment

    <div>…</div> </button> </template> </element>
58. 58.

    Fully encapsulated & reusable

59. 59.

    Encapsulation Reusability Portability Shadow DOM Templates Custom elements

60. 60.

    That’s it.

61. 61.

    Styling the Shadow DOM

62. 62.

    The shadow boundary

63. 63.

    The shadow boundary CSS

64. 64.

    The shadow boundary CSS

65. 65.

    .applyAuthorStyles newRoot = foo.createShadowRoot(); newRoot.applyAuthorStyles = true;

66. 66.

    The shadow boundary CSS

67. 67.

    The shadow boundary CSS

68. 68.

    Pseudo-elements

69. 69.

    Pseudo-elements <progress> <div>::-webkit-progress-bar <div>::-webkit-progress-value

70. 70.

    {demo}

71. 71.

    The part attribute var newRoot = el.createShadowRoot(), newEl = '<h2

    part="apes">…</h2>'; newRoot.appendChild(newEl);
72. 72.

    The part attribute <div class="foo"> #document-fragment <h2 part="apes">Shadow world!</h2> </div>

    .foo::part(apes) { color: red; }
73. 73.

    Scope

74. 74.

    <p>Hello</p> <div> <style> p { color: #f00; } </style> <p>World!</p>

    </div> <p>Again</p> Scoped styles
75. 75.

    <p>Hello</p> <div> <style scoped> p { color: #f00; } </style>

    <p>World!</p> </div> <p>Again</p> Scoped styles
76. 76.

    css = '<style>p { color: #f00; }</style>'; newRoot.appendChild(css); Shadow scope

77. 77.

    Custom properties (variables)

78. 78.

    body { var-highlight: #f00; } Custom properties h1 { color:

    var(highlight); }
79. 79.

    body { var-highlight: #f00; } Custom properties .foo { var-highlight:

    #00f; }
80. 80.

    Custom properties <div class="foo"> #document-fragment <style> h1 { color: var(highlight);

    } </style> </div> body { var-highlight: #f00; }
81. 81.

    The Future?

82. 82.

    Decorators

83. 83.

    The decorator element <template> <content /> <h2>Hello world!</h2> </template> <decorator

    id="foo"> </decorator>
84. 84.

    Decorators <h1>Front End United</h1> h1 { decorator: url(#foo); } <div>

    <h2>Hello world!</h2> </div>
85. 85.

    Shadow DOM Shadow DOM API Templates HTML imports Custom elements

    Scoped styles Custom properties Browser support
86. 86.

    86 Polymer project Polymer project

87. 87.

    plus.google.com/+EricBidelman updates.html5rocks.com/tag/webcomponents Useful links polymer-project.org mozilla.github.io/brick customelements.io

88. 88.

    Multumesc ’