title: Referencing values within Polymer elements
body: <p>I'm following the codelab for Polymerfire and first bit of tinkering, wanted to change the login element from using google sign in to use email / password.</p>
  
  <p>The element works but I've been having trouble trying to access the values of the email / password field outside of the element itself.</p>
  
  <p>I would've thought that I could access the value of the email textfield by referencing this.$.login.email.value but that doesn't work. </p>
  
  <p>Here's my code</p>
  
  <p>The login element</p>
  
  <pre><code>&lt;dom-module id="as-login"&gt;
  &lt;template&gt;    
  &lt;!-- Here we stick in our login fields --&gt;
  &lt;paper-input id="email" label="Email"&gt;&lt;/paper-input&gt;
  &lt;paper-input id="password" label="Password" type="password"&gt;&lt;/paper-input&gt;
  
  &lt;paper-button id="login" on-tap="signIn" disabled="[[disabled]]"&gt;
  &lt;iron-icon icon="account-circle"&gt;&lt;/iron-icon&gt;
  &lt;span&gt;Sign in&lt;/span&gt;
  &lt;/paper-button&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
  Polymer({
  is: 'as-login',
  
  properties: {
  disabled: {
  type: Boolean,
  reflectToAttribute: true,
  value: false
  },
  
  signedIn: {
  type: Boolean,
  reflectToAttribute: true,
  value: false
  }
  },
  
  signIn: function() {
  this.fire('sign-in', null, { bubbles: false });
  },
  
  clearEmail: function() {
  this.$.email.value = "";
  },
  
  clearPassword: function() {
  this.$.password.value = "";
  },
  
  getEmail: function() {
  return(this.$.email.value);
  },
  
  getPassword: function() {
  return(this.$.password.value);
  },
  });
  &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>And here is the app element</p>
  
  <pre><code>&lt;as-login
  id="login"
  on-sign-in="signIn"
  signed-in="[[signedIn]]"
  disabled="[[!online]]"&gt;
  &lt;/as-login&gt;
  
  &lt;script&gt;
  Polymer({
  is: 'as-app',
  behaviors: [Polymer.AsAppBehaviour],
  signIn: function() {
  console.log("Let one sign in");
  
  // Process sign in promise
  this.$.auth.signInWithEmailAndPassword(this.$.login.getEmail(), this.$.login.getPassword())
  .then(function(res) {
  console.log("We signed in");
  })
  .catch(function(err) {
  console.log("We got an error");
  });
  },
  
  signOut: function() {
  console.log("Let one sign out");
  this.$.auth.signOut();
  }
  });
  &lt;/script&gt;
  </code></pre>