data-binding.html

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

<dom-module id="data-binding">
  <script>
    /**
     * `data-binding`
     * Test examples
     *
     * @customElement
     * @polymer
     * @demo demo/data-binding.html
     */
    class FireEvent extends Polymer.Element {
        static get is() { return 'data-binding'; }
        static get properties() {
            return {
                nativeValue: String,
                ironValue: String,
                selectValue: {
                    type: String,
                    value: 'Option1',
                },
                valueEvent: String,
                valueEvent2: String,
            };
        }

        static get template() {
            return Polymer.html`
                <style>
                    :host {
                        display: block;
                    }
                    input, iron-input, select {
                        display: block;
                        margin-bottom: 10px;
                    }
                </style>

                <label for="nativeInput">Type something</label>
                <input id="nativeInput" type="text" value="{{nativeValue::input}}">

                <label for="nativeInputInsideIronInput">Type more things</label>
                <iron-input bind-value="{{ironValue}}">
                    <input id="nativeInputInsideIronInput" type="text" value="{{value1::input}}">
                </iron-input>

                <label for="mySelect">Select one option</label>
                <select id="mySelect" value="{{selectValue::change}}">
                    <option value="Option1">Option 1</option>
                    <option value="Option2">Option 2</option>
                    <option value="Option3">Option 3</option>
                    <option value="Option4">Option 4</option>
                </select>

                <label for="myInputWithEventHandling">Input with event 1</label>
                <input id="myInputWithEventHandling" on-input="_onInput">

                <label for="myInputWithEventHandling2">Input with event 2</label>
                <input id="myInputWithEventHandling2">

                <button on-click="_showResultInConsole">Check the result in console</button>
            `;
        }

        connectedCallback() {
            super.connectedCallback();
            this.shadowRoot.querySelector('#myInputWithEventHandling2').addEventListener('input', this._onInput2.bind(this));
        }

        disconnectedCallback() {
            super.disconnectedCallback();
            this.shadowRoot.querySelector('#myInputWithEventHandling2').removeEventListener('input', this._onInput2.bind(this));
        }

        _onInput(event) {
            this.set('valueEvent', event.currentTarget.value);
        }

        _onInput2(event) {
            this.set('valueEvent2', event.currentTarget.value);
        }

        _showResultInConsole() {
            console.log(this.nativeValue, this.ironValue, this.selectValue, this.valueEvent, this.valueEvent2);
        }
    }

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