A step-by-step introduction to coding web components, intended for use during a presentation.
Code will only run in browsers that support web components natively (currently Chrome 36+ and Opera 23+) since I've intentionally left out Polymer's platform.js polyfills.
Run npm install to pull down the necessary dependencies.
Run grunt start to begin. It will check out the commit for the first step, start a web server, and navigate to it in a new tab in your browser. Press enter in the terminal when you are ready to move to the next step.
Use a side-by-side diffing tool (like SmartGit) to show code changes from step to step.
- This HTML5Rocks article was the main inspiration for the basic flow of information.
- The Polymer website has information on everything related to web components.
- This article explains how to wrap a Custom Element + Shadow DOM + HTML Template in an HTML import.