Polymer Elements Library

Polymer provides a large set of standard components that are grouped in collections: iron-elements, paper-elements, app-elements, gold-elements, etc.

The first two collections are the most basic and commonly used:

Iron elements provide some very basic components that are required for almost every project: input, label, etc.
Paper elements provide a set of UI components implementing material design: input, checkbox, slider, etc.

You already saw iron-input in our previous examples. Let’s check one of the paper elements: paper-checkbox. It is a flat design implementation of a simple checkbox. Below is a simple application that uses this element.

Music taste analyzer

It’s a component that can analyze person’s music preferences and draw a mental portrait based on it. Let’s check how it works under the hood.

Source code

index.html

<html>
<head>
	<link rel="import" href="src/polymer-basic/library/music-survey.html">
	<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
    <music-survey></music-survey>
</body>
</html>

src/polymer-basic/library/music-survey.html

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html">

<dom-module id="music-survey">
  <template>

    <div>
      Select music genres you like and we will tell you about your character.
    </div>
    <br/>
    <div>
      <template is="dom-repeat" items="[[genres]]">
        <paper-checkbox class="genre-checkbox">[[item]]</paper-checkbox>
      </template>

    </div>
    <br/>
    <div>
      <button on-click="analyze">Submit</button>
    </div>

  </template>
  <script>
    class MusicSurvey extends Polymer.Element {
      static get is() {
        return 'music-survey';
      }

      static get properties() {
        return {
          genres: {
            type: Array,
            value: function() {
              return ['Blues', 'Classical', 'Funk', 'Jazz', 'Rap', 'Rock'];
            }
          }
        }
      }

      analyze() {
        const selectedGenres = [];

        // An example of how we can find HTML elements matching some selector
        Polymer.dom(this.root).querySelectorAll('.genre-checkbox').forEach(function(checkbox) {
          if (checkbox.checked) {
            // selectedGenres is a local variable.
            // So, nothing prevents us from using a standard 'push' method instead of
            //  some Polymer special methods.
            selectedGenres.push(checkbox.textContent.trim());
          }
        });

        const genreAnalyze = selectedGenres.length === 0
          ? 'You don\'t seem to like any particular genre. '
          : 'You like ' + selectedGenres.join(', ') + '. ';

        alert(genreAnalyze + 'Probably you are a good and kind person.');
      }
    }

    customElements.define(MusicSurvey.is, MusicSurvey);
  </script>
</dom-module>

To learn more about the standard library of Polymer components visit https://www.webcomponents.org/collection/Polymer/elements

What we have learned so far

Polymer offers a number of ready-to-use components.
Iron elements are the most basic components from the standard library.
Paper elements collection provides a list of UI components implementing material design.
We can use Polymer.dom(this.root).querySelectorAll("some-selector-there") to find elements in our component.