how to access input element in a polymer web-component

Question

I've managed to setup a simple registration form with Polymer:

<polymer-element name="app-registration">

    <template>
        <style>
            ...
        </style>
        <section>
            <paper-input class="username" .... ></paper-input>
            <paper-input class="password" .... ></paper-input>
            <paper-button label="Submit" on-tap="{{handleSubmit}}"></paper-button>
        </section>
    </template>

    <script>
        Polymer({
            handleSubmit: function (event, detail, sender) {
                alert(this.querySelector('.username').value);
            }
        });
    </script>

</polymer-element>

It works fine, however, within the handleSubmit callback I'm not able to query the values from the other input fields. Whatever I query paper-input or by classname I receive null. Any suggestion how to do this ?

Answer 1

Those elements are in your shadow dom, so you need this.shadowRoot. this.querySelector() will give you light dom nodes.

this.shadowRoot.querySelector('.username').value

Better yet, would be to add an id:

<section id="container">
  <paper-input class="username" .... ></paper-input>
  ...
</section>

and use node finding: this.$.container.querySelector('.username').value.