Try Web Components
32 likes5,407 views
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.
![<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>](https://image.slidesharecdn.com/tanitry-webcomponents-131030074801-phpapp02/85/Try-Web-Components-28-320.jpg)
Try Web Components
- 4. Goal
- 7. Shadow DOM Encapsulation HTML Templates Scaffolding Custom Elements Extensions HTML Imports Packaging
- 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
- 15. Fail! Fail!
- 17. Fail! Fail!
- 19. Try Web Components! w/ Polymer
- 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...
- 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>
- 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>
- 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