Polymer 1: How can I set up paper-checkbox label dynamically using a custom element

Question

I want to set label/s of paper-checkbox elements through a custom element I have created.

This is how I am calling my custom element with the value set to a property called optionLabel which I want to display when checkbox renders on the screen.

<check-list optionLabel="My first checkbox"></check-list>

My custom element check-list looks like this:

<dom-module id="check-list">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
      <paper-checkbox on-change="_checkChanged">{{optionLabel}}</paper-checkbox>
  </template>
  <script>
  (function () {
      'use strict';

      Polymer({
          is: 'check-list',

          properties: {
              optionLabel: {
                  type: String,
                  notify: true
              }
          },

          _checkChanged: function (e) {
              alert("State changed");
          }
      });
  })();
  </script>
</dom-module>

My goal is to reuse my custom element inside a dom-repeat layout and set values according to the requirement.

What is the correct way of doing this?

Answer 1

According to the documentation camelCase properties are "accessed" from outside the element like camel-case. The documentation states the following:

Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName. The same mappings happen in reverse when converting property names to attribute names.

In other words, your code should have worked if you did the following instead:

<check-list option-label="My first checkbox"></check-list>