Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community Get started
Build an element
1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties
Build an app
1. Get set up 2. Create a new page 3. Add some elements 4. Deploy

In this tutorial, you’ll learn how to build elements using Polymer 1.0. You’ll create a simple Polymer element, a toggle button. The finished button will look something like this:

Sample star-shaped toggle buttons, showing pressed and unpressedstate

You’ll be able to use it with simple markup like this:

<icon-toggle></icon-toggle>

This project introduces you to most of the key concepts in working with Polymer.

Don’t worry if you don’t understand everything. Each of the concepts presented here is described in detail in the Polymer documentation.

To follow this tutorial, you’ll need:

Don’t want to install anything? To run through this tutorial online, follow the instruction in Step 1: No install version.

  1. Click the button to download the starting code as a ZIP file.

    Download ZIP
  2. Expand the archive to create your project folder.

    Your project folder should look something like this:

    README.md
    bower.json
    bower_components/
    demo/
    icon-toggle-finished/
    icon-toggle.html
    

    The main file you’ll work with is icon-toggle.html, which contains the definition for your custom element.

Install the Polymer CLI to serve the demo locally.

  1. Install an active LTS version of Node.js (4.x or 6.x). The current version (7.x) should work, but is not officially supported.

  2. Install git.

  3. Install the latest version of Bower.

    npm install -g bower
    
  4. Install Polymer CLI.

    npm install -g polymer-cli
    

To run the element demo:

  1. Run polymer serve from the repo directory:

    polymer serve
    
  2. Open localhost:8080/components/icon-toggle/demo/ in your browser.

    (Note that the path uses icon-toggle—the component name listed in this element’s bower.json file—rather than the actual directory name. If you’re wondering why polymer serve does this, see HTML imports and dependency management.)

    You’ll see some text where the icon toggles should appear. It doesn’t look very interesting, but it shows that everything is working.

Initial state of the demo. The demo shows three icon-toggle elements, two labeled 'statically-configured icon toggles' and one labeled 'data-bound icon toggle'. Since the icon toggles are not implemented yet, they appear as placeholder text reading 'Not much here yet'.

If this text doesn’t appear, make sure you’re looking at the the demo folder itself, or at demo/index.html, not at toggle-icon.html or toggle-icon-demo.html.

If everything looks good, move on to step 2.

Step 2: Add local DOM

To run through this tutorial online without installing anything:

  1. Open the starter project on Plunker.

  2. Click Fork to create your own working copy.

Continue to step 2.

Step 2: Add local DOM