fire-event.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="fire-event">
  <script>
    /**
     * `fire-event`
     * Test examples
     *
     * @customElement
     * @polymer
     * @demo demo/fire-event.html
     */
    class FireEvent extends Polymer.Element {
        static get is() { return 'fire-event'; }

        static get template() {
            return Polymer.html`
                <style>
                    :host {
                        display: block;
                    }
                </style>
                <!-- on-click is not the same as onclick -->
                <button on-click="_fireEvent">Fire Event!!!</button>
                <button id="MyButtonListener">Fire Event from a listener (you can focus me and then press space)!!!</button>
            `;
        }

        connectedCallback() {
            super.connectedCallback();
            this.shadowRoot.querySelector('#MyButtonListener').addEventListener('keydown', this._fireEventWithDetails);
        }

        disconnectedCallback() {
            super.disconnectedCallback();
            this.shadowRoot.querySelector('#MyButtonListener').removeEventListener('keydown', this._fireEventWithDetails);
        }

        _fireEvent() {
            this.dispatchEvent(new CustomEvent('my-fired-event', {
                bubbles: true,
                composed: true,
            }));
        }

        _fireEventWithDetails() {
            this.dispatchEvent(new CustomEvent('my-fired-event', {
                bubbles: true,
                composed: true,
                detail: {
                    myDetail: true,
                },
            }));
        }
    }

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