The WebComponents.org Resources is a place to introduce useful tools and boilerplates to easily start hacking on your own custom elements.
Web Components is a set of specs that introduce a lot of new stuff. So, before creating anything, first you need to understand what is this all about. That's why we selected the best Articles and Presentations for you. More than that, we recommend you to read:
- Component Kitchen's interactive tutorial;
- Eric's article on how to create Custom Elements using VanillaJS;
- Polymer's documentation;
- X-Tag's documentation.
These will give you an idea on how these different solutions work and what's better for you.
Once you learned what the heck is Web Components, it's time to create your own element! And to make your life even easier we put together some boilerplates:
In these boilerplates, we solve the same problem using different libraries (Polymer/X-Tag) or no library at all (VanillaJS). Always using the same tools and following the same directory structure.
We encourage a series of best practices like setting up a live demo, documenting your API, maintaining a changelog for release purposes, and sharing it on Bower. It's basically an opinionated starter-kit with all you need included, from polyfills to automated tasks.
The only problem is that you still need to make some changes manually after forking it like changing an element's name in different files. So, in order to automate this process, we created a Yeoman Generator and a Slush Generator that can scaffold a Web Components project in seconds using the command-line:
There are a bunch of cool stuff in this NodeJS tool that weren't able to be included in the boilerplate, things like validating your element's name according to W3C's spec rules and check if there's a similar project on Bower.
Now that you finished your element it's time to spread the word about it! You might not believe me but there are other people in the world that could benefit from it, so why not share it with them?
If you're not so sure about this whole Bower thing, have no fear! There's a screencast where Rob Dodson walks you through installing Bower, creating a project with the
bower init command, and building your first element using Polymer.
Finally, don't forget to add the
web-components keyword in your
bower.json file. By doing this your awesome element will automagically appear on CustomElements.io.