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

Now that you've added a new view to your application, you can start building out the details of that view.

In the process, you'll likely want to turn to some off-the-shelf components, for example from webcomponents.org.

Once you've identified a component you'd like to install, you'll want to find the bower package name for the component.

In this step, you'll add Polymer's <paper-checkbox> element to your app, which is listed on webcomponents.org. You can use Bower to install it.

Run this command from your project root directory:

bower install --save PolymerElements/paper-checkbox#2.0-preview
  1. Open src/my-new-view.html in a text editor.

  2. Import paper-checkbox.html as a dependency.

    Add this import beneath the existing import for polymer-element.html:

    <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
    
  3. Add the <paper-checkbox> element to the template for the element.

    <paper-checkbox>Ready to deploy!</paper-checkbox>
    

    You can add it under the <h1> you added in the previous step. Your new template should look like this:

    <!-- Defines the element's style and local DOM -->
    <template>
      <style>
        :host {
          display: block;
    
          padding: 16px;
        }
      </style>
    
      <h1>New view</h1>
      <paper-checkbox>Ready to deploy!</paper-checkbox>
    </template>
    

You should be able to see the paper-checkbox working in your new view now:

Example of page with checkbox

Now that you've added a 3rd-party component to your page, learn how to deploy the app to the web.