polymer: Prevent duplicate ID's in polyfill

When using id’s in a polymer component and using the new element multiple times, the fallback solution will render the same html multiple times, which leads to multiple id’s inside of the DOM, invalid html and maybe misbehaviour.

For example:

<polymer-element name="sj-checkbox" attributes="size">
  <template>
    <style>
    /* all my styles here */
    </style>
    <div class="switch {{size}}">
      <div class="switch__circle">
          <input id="switcher" class="switch__input" type="checkbox" on-change="changeHandler" checked="checked">
          <div class="switch__innerCircles"></div>
          <label class="switch__label" for="switcher">Switch me!!!</label>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer( 'sj-checkbox', {
      size: 'medium',
      changeHandler: function( event ) {
        this.fire(
          'change',
          {
            id: event.target.id
          }
        );
      }
    } );
  </script>
</polymer-element>

will become:

<sj-checkbox size="big" fallbackid="checkboxBigComponent">
  <div class="switch big">
    <div class="switch__circle">
      <input id="switcher" class="switch__input" type="checkbox" on-change="changeHandler" checked="checked">
      <div class="switch__innerCircles"></div>
      <label class="switch__label" for="switcher">Switch me!!!</label>
    </div>
  </div>
</sj-checkbox>

Unfortunately the component is not reusable in this case.