Building and Publishing your Web Component in 9 Steps
This is a quick tutorial on how to build your Web Component, push it to GitHub with a demo and finally publish it to bower (optional). We will be building an upper-case tag, which will make the text-content inside it appear in upper case.
What started of as a “small experiment” ended up with me sleepless for 2 days straight.
It all started with this video
Pretty pumped up, I started off exploring the New Polymer. I used Polymer a couple of months ago and wrote a tutorial on Web Components and Polymer . Now, a lot has changed. So, super excited about the new way of developing Web Components, I quickly whipped out 3 new components (<upper-case>, <lower-case> and <capital-case>). Pretty basic, but gave me a decent hands on.
Then I started digging into their tutorial (a must read) and loved the way how components go hand in hand in building an actual application, yet the smaller pieces remain reusable. This got me thinking to make a Hybrid app for my blog using Web Components, PhoneGap and WordPress and this post is the on-going journey.
As of today I was not able to get the Hybrid app working on most of the devices. I was able to get it working only on an iOS emulator (did not test on iPhone/iPad device) and Android 4.4.2 (Android emulator). but I have raised this issue with the Polymer folks.
This blog post is about Web Components. What they are, why do we need them and how to go about creating a few of our own. We will also look at the browser support, make sure our Web Components work everywhere with the help of polyfills like Polymer. And finally, we will be using Yeoman to scaffold a Polymer project and using Yeoman sub-generators to scaffold new Web Components.