Recently I got interested in X-Tag project.
I will create some custom elements and will blog on whole process.
X-Tag project is from Mozilla.
It provide a cool way to create your own html tags
like
<uni-button></uni-button>
<uni-progress-bar></uni-progress-bar>
The way of interacting with these HTML element is same as Native html element,
Like you can do use jQuery
As shown in this example - http://jsfiddle.net/nsisodiya/266tt/
in this example, I have used x-flipbox element from brick library.
Defining custom element provide modular design.
There is huge list of custom html element can be found on
Example like - https://github.com/luiztiago/facebook-image-element
create very simple way to add facebook image of any user using following html markup
<facebook-image object="luiztiago"></facebook-image>
<facebook-image object="narendra.sisodiya"></facebook-image>
etc
will add facebook image on your site.
We have a chrome plugin which detect that If a website is using Web Components (Custom elements) or not
There are 2 main ways to write custom elements
1) using XTag
2) using Polymer
I am first exploring X-tags
You can learn how to create a custom element here http://x-tags.org/docs
--
Narendra Sisodiya
UI Architect @ Unicommerce
Delhi - Bharat (India)UI Architect @ Unicommerce