how to access the input element in a polymer web component


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

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

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

            handleSubmit: function (event, detail, sender) {


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 ?

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


Better yet, would be to add an id:

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

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