title: Polymer 1.0: Two-way bindings with input elements
body: <h1>Code</h1>
  
  <p>Consider the following Polymer custom element:</p>
  
  <p></p>
  
  <pre><code>&lt;dom-module id="test-element"&gt;
  
  &lt;template&gt;
      &lt;input type="text" value="{{value}}"&gt;
      &lt;button&gt;Reset&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  Polymer({
      is: 'test-element',
      properties: {
          'value': {
              type: String,
              reflectToAttribute: true,
              notify: true,
              value: null
          }
      }
  });
  &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>I use this custom element in my index.html as follows:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
      &lt;link rel="import" href="test-element.html"&gt;
      &lt;title&gt;Test App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;test-element value="test"&gt;&lt;/test-element&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>Question</h1>
  
  <p>I believe I have declared the <code>value</code> property as a two-way binding (<code>notify: true</code>); yet when I click on the input and type in some text (say, <code>"foo"</code>), it is not reflected in the model (i.e. a call to <code>document.querySelector('test-element').value</code> returns the value I set in index.html, <code>"test"</code>).  Interestingly enough, the <code>value</code> attribute of the input changes correctly, but the value property of my test-element does not.  What am I missing?</p>
  
  <p>I should also note that a call to <code>document.querySelector('test-element').setAttribute('value', 'bar')</code> works properly.</p>