webcomponents-v1-examples

Examples of using the Web Components V1 specs with VanillaJS, plus hello world examples for Polymer, Skate, and Stencil.

These examples are a companion to the HTML5 Web Components State of the Union presentation.

Running the Examples

To run the examples:

1. Make sure you have npm and bower installed. (Bower is necessary for the Polymer examples).

2. Clone this repository.

3. Install static-server:

npm install -g static-server

1. Install the npm and bower dependencies:

npm install && bower install

1. Run the web server:

npm run serve

1. Point your browser to http://localhost:9080. There will be links to each of the examples.

VanillaJS Examples

These can be found in the /src/vanillajs folder.

There are six examples:

• Custom Elements (Edit on Plunker)
• Custom Elements plus HTML Template (Edit on Plunker)
• Custom Elements plus HTML Template and Shadow DOM (Edit on Plunker)
• Custom Elements plus HTML Template, Shadow DOM, and HTML Imports (Edit on Plunker)
• Echo component
• HTML Templates (without web components)

You can make changes to these files and simply reload the page to see the changes.

Polymer Example

These can be found in the /src/polymer folder.

There is one simple "echo" component demo.

You can make changes to these files and simply reload the page to see the changes.

SkateJS Example

These can be found in the /src/skate folder.

There is one simple "echo" component demo. ``

NOTE: Currently the Skate.js example uses native ES2015 modules and requires manually editing the node_nodules/skatejs/esnext export statements to have the extension '.js'. It has only been tested in Chrome.

You can make changes to these files and simply reload the page to see the changes.

Stencil Example

These can be found in the /src/stencil folder.

There is one simple "echo" component demo.

Since Stencil is a compiler, you must run the development server to pick up your changes. You can run it with the following command:

npm run stenil-serve