Home Start Get started Quick tour of Polymer Install Polymer 2.x 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 About this release What's new in 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties 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 Browser support Overview Polyfills ES6 Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements Web services polymer.json specification Node support Resources Glossary API Reference API Reference Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Deploy Build for production Serve your app The PRPL pattern Case study Shop News Blog Community Get started Quick tour of Polymer Install Polymer 2.x
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 2.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:

  1. Download the starting code by running this command:

    git clone https://github.com/PolymerLabs/polymer-2-first-element.git
    
  2. Open the project folder:

    cd polymer-2-first-element
    

    Your project folder should look something like this:

    README.md
    bower.json
    demo/
    icon-toggle-finished/
    icon-toggle.html
    index.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.

Polymer CLI requires Node.js, npm, git and Bower. For full installation instructions, see the Polymer CLI documentation.

To install Polymer CLI:

npm install -g polymer-cli

To install the element's dependencies and run the demo:

  1. Run bower install from the repo directory:

    bower install
    

    This installs the components and dependencies required to use the Polymer library and other web components.

    You will now see an extra folder named bower_components in the project directory:

    README.md
    bower.json
    bower_components
    demo/
    icon-toggle-finished/
    icon-toggle.html
    index.html
    
  2. Run the Polymer development server from the project directory:

    polymer serve --open
    

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

    (Note that the URL includes 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.)

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 everything looks good, move on to step 2.

Step 2: Add local DOM