title: Are attributes and properties with dashes supported in Polymer?
body: <p>I can make a <a href="http://www.polymer-project.org/" rel="nofollow">Polymer</a> checkbox using the following html:</p>
  
  <pre><code>&lt;polymer-element name="role-checkbox1" attributes="ariachecked" on-click="{{clickHandler}}"&gt;
      &lt;template&gt;
          &lt;style&gt;
              :host::after {
                  font-size: 100px;
                  display: inline-block;
                  border: 1px solid black;
                  content: '+';
                  width: 1em;
                  height: 1em;
              }
              :host[ariachecked]::after {
                  content: 'x';
              }
          &lt;/style&gt;
      &lt;/template&gt;
      &lt;script&gt;
      Polymer('role-checkbox1', {
          ariachecked: false,
          clickHandler: function() {
              this.ariachecked = !this.ariachecked;
          }
      });
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>The following is the exact same except that <em>ariachecked</em> is now <em>aria-checked</em> and the <em>role-checkbox1</em> is not role-checkbox2.  This does not seem to be working.  Is there a way that I can use the <em>aria-checked</em> attribute?  Can I bind this attribute to another named property?</p>
  
  <pre><code>&lt;polymer-element name="role-checkbox2" attributes="aria-checked" on-click="{{clickHandler}}"&gt;
      &lt;template&gt;
          &lt;style&gt;
              :host::after {
                  font-size: 100px;
                  display: inline-block;
                  border: 1px solid black;
                  content: '+';
                  width: 1em;
                  height: 1em;
              }
              :host[aria-checked]::after {
                  content: 'x';
              }
          &lt;/style&gt;
      &lt;/template&gt;
      &lt;script&gt;
      Polymer('role-checkbox2', {
          'aria-checked': false,
          clickHandler: function() {
              this['aria-checked'] = !this['aria-checked'];
          }
      });
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p><a href="http://jsbin.com/kosik/1/edit?html,output" rel="nofollow">Working Example</a> (Click on the two boxes, only the left one is working)</p>