https://github.com/cletusw/web-components-intro

A step-by-step introduction to web components, intended for use during a presentation.
https://github.com/cletusw/web-components-intro

Last synced: about 1 month ago
JSON representation

A step-by-step introduction to web components, intended for use during a presentation.

• Host: GitHub
• URL: https://github.com/cletusw/web-components-intro
• Owner: cletusw
• License: mit
• Created: 2014-07-09T19:24:35.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-11-25T21:29:36.000Z (about 10 years ago)
• Last Synced: 2024-10-12T17:37:15.998Z (2 months ago)
• Language: JavaScript
• Size: 2.41 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
web-components-intro

====================

A step-by-step introduction to coding web components, intended for use during a presentation.

Requirements

============

Code will only run in browsers that support web components natively [(currently Chrome 36+ and Opera 23+)](http://caniuse.com/#search=components) since I've intentionally left out Polymer's platform.js polyfills.

Installation

============

Run `npm install` to pull down the necessary dependencies.

Usage

=====

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.

Additional Information

======================

* [This HTML5Rocks article](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) was the main inspiration for the basic flow of information.

* [The Polymer website](http://www.polymer-project.org/) has information on everything related to web components.

* [This article](http://robdodson.me/blog/2013/08/20/exploring-html-imports/) explains how to wrap a Custom Element + Shadow DOM + HTML Template in an HTML import.