The document introduces Web Components and promotes trying them. It provides examples of Web Components like <x-calendar> and <x-flipbox> that can be used to build reusable custom elements. It also describes how to create a Web Component using Polymer and shows an example <x-like> component for liking posts. The document encourages developing with Web Components as it makes front-end development more fun and modular.

1. Try Web Components!

2. Hiroki Tani
Front-end Developer

3. 2013-11-30(SAT.)

4. Goal

5. Goal
$ yo polymer

6. Web Components?

7. Shadow DOM Encapsulation
HTML Templates Scaffolding
Custom Elements Extensions
HTML Imports Packaging

8. <x-calendar></x-calendar>
http://mozilla.github.io/brick/demos/x-tag-calendar/index.html

9. <x-calendar view="2013-06-09" controls></x-calendar>
http://mozilla.github.io/brick/demos/x-tag-calendar/index.html

10. <x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>
http://mozilla.github.io/brick/demos/x-tag-flipbox/index.html

11. <button is="mega-button">Mega button</button>
http://www.webcomponentsshift.com/#10

12. <gangnam-style></gangnam-style>
http://www.webcomponentsshift.com/#9

13. <gangnam-style></gangnam-style>
http://www.webcomponentsshift.com/#9

15. Fail!
Fail!

17. Fail!
Fail!

18. Try Web Components!

19. Try Web Components!
w/ Polymer

20. http://www.polymer-project.org/

21. http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/

22. http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/

23. $
$
$
$
$
npm install -g yo
npm install generator-polymer -g
mkdir YOUR_PROJECT && cd $_
yo polymer
yo polymer:element YOUR_ELEMENT
http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/

24. <polymer-element name="YOUR_ELEMENT-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>YOURELEMENT-element</b>. This is my Shadow
DOM.</span>
</template>
<script>
Polymer('YOUR_ELEMENT-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>

25. <polymer-element name="YOUR_ELEMENT-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>YOURELEMENT-element</b>. This is my Shadow
DOM.</span>
</template>
<script>
Polymer('YOUR_ELEMENT-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>

26. <polymer-element name="YOUR_ELEMENT-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>YOURELEMENT-element</b>. This is my Shadow
DOM.</span>
</template>
<script>
Polymer('YOUR_ELEMENT-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Please...

27. <x-switch></x-switch>
https://github.com/hiloki/demo/tree/master/frontrend_chrome/switch.html

28. <polymer-element name="x-switch" attributes="status">
<template>
<style>
...
input[type=checkbox] {
-webkit-appearance: none;
box-shadow: inset 0px 0px 0px 1px #e6e6e6;
...
}
input[type=checkbox]:checked {
box-shadow: inset 0px 0px 0px 20px #53d76a;
}
...
</style>
<input type="checkbox" />
</template>
<script>
...
</script>
</polymer-element>

29. <x-switch></x-switch>

30. https://github.com/hiloki/demo/tree/master/frontrend_chrome

31. <x-appbar heading="Feed" class="the-header">
<a href="./home" class="appbar-left">
<x-icon type="fa-list" attr="fa-lg"></x-icon>
</a>
<a href="./gear" class="appbar-right">
<x-icon type="fa-gear" attr="fa-lg"></x-icon>
</a>
</x-appbar>

32. <x-tabs class="the-tabs">
<div>
<x-icon type="fa-pencil" attr="fa-lg"></x-icon> Status
</div>
<div>
<x-icon type="fa-camera" attr="fa-lg"></x-icon> Photo
</div>
<div>
<x-icon type="fa-map-marker" attr="fa-lg"></x-icon> Check-in
</div>
</x-tabs>

33. <x-media src="/images/hiloki.jpg" width="50" height="50"
class="author">
<p class="author-name">Hiroki Tani</p>
<p><x-icon type="fa-map-marker" attr="fa-lg"></x-icon>
Nagiso, Nagano</p>
</x-media>

34. <x-like class="the-article-feedback-like"></x-like>
index.html

35. <x-like class="the-article-feedback-like"></x-like>
class="the-article-feedback-like">
<x-icon type="fa-thumbs-o-up" attr="fa-lg" on-click="">
<i class="fa fa-thumbs-o-up fa-lg"></i>
</x-icon>
<span></span>
</x-like>
index.html + Show Shadow DOM

36. <polymer-element name="x-like" attributes="type count">
<template>
<x-icon type="{{type}}" attr="fa-lg" on-click="{{countup}}"></xicon> <span>{{count}}</span>
</template>
<script>
Polymer('x-like', {
type: "fa-thumbs-o-up",
count: "",
countup: function() {
this.count++;
this.type = "fa-thumbs-up";
}
});
</script>
</polymer-element>
elements/x-like.html

37. <x-like class="the-article-feedback-like" type="fa-thumbs-up"
count="3">
<x-icon type="fa-thumbs-up" attr="fa-lg" on-click="">
<i class="fa fa-thumbs-up fa-lg"></i>
</x-icon>
<span>3</span>
</x-like>
index.html + Show Shadow DOM

38. Web Components
makes
Web development
more fun!

39. Thanks!
Hiroki Tani
@hiloki,@hiloki_en
inkdesign.jp
html5experts.jp/hiloki/