scratch-card.html

<script src="js/scratch.js" type="text/javascript"></script>
<link rel="import" href="bower_components/polymer/polymer-element.html">

<dom-module id="scratch-card">
  <template>
    <style>
       :host {
        display: block;
      }
    </style>
    <h2>[[title]]!</h2>
    <div id="container">
    </div>
  </template>

  <script>
    /**
     * `scratch-card`
     * scratch card using to images
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class ScratchCard extends Polymer.Element {
      static get is() { return 'scratch-card'; }
      static get properties() {
        return {
          title: {
            type: String,
            value: "scratch card"
          },
          background: {
            type: String,
          },
          foreground: {
            type: String,
          },
          percent: {
            type: Number,
            value: 85
          },
          thickness: {
            type: Number,
            value: 30
          },
          coin: {
            type: String,
          },
          load: {
            type: Boolean,
            value: false,
            notify: true,
            observer: '_doLoad'
          },
        };
      }
      _doLoad() {
        if (this.load) {
          this._clear();
          this._loadScratch();
        }
      }
      _loadScratch() {
        createScratchCard({
          "container": this.$.container,
          "background": this.background,
          "foreground": this.foreground,
          "percent": this.percent,
          "thickness": this.thickness,
          "coin": this.coin,
        });
        this.load = false;
      }
      _clear() {
        if (typeof(this.$.container.clean) === typeof(Function)) {
          this.$.container.clean();
        }
      }

      _callback(event) {
        this.dispatchEvent(new CustomEvent('scratch-finished', { detail: event.detail, bubbles: true, composed: true }));
      }

      connectedCallback() {
        super.connectedCallback();
        this.$.container.addEventListener('scratch-end', this._callback);
      }

      disconnectedCallback() {
        super.disconnectedCallback();
        this.$.container.removeEventListener('scratch-end', this._callback);
      }

    }

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