title: Faking jQuery :checked selector for a custom Polymer element
body: <p>I have a Polymer element which acts as a customized/stylized checkbox.</p>
  
  <p>It's essentially a section which wraps a checkbox:</p>
  
  <pre><code># Light DOM
  &lt;my-checkbox&gt;
  
    # Shadow DOM/Polymer HTML
    &lt;section id="root"&gt;
      &lt;input type="checkbox" id="checkbox"/&gt;
    &lt;/section&gt;
  
  &lt;/my-checkbox&gt;
  </code></pre>
  
  <p>The actual input/checkbox toggles when you click the light DOM element.  I can easily toggle the "checked" attribute/property on <code>my-checkbox</code> by listening to "change" of the checkbox.</p>
  
  <pre><code>$(@$.checkbox).change () =&gt;
  
    checked = $(@$.checkbox).is(":checked")
  
    # Fake the prop "checked" for aci-checkbox
    $(@).prop "checked", checked
  
    if checked
      $(@).attr "checked", ""
    else
      $(@).removeAttr "checked"
  </code></pre>
  
  <p>What I cannot do is make <code>my-checkbox</code> respond to <code>.is(":checked")</code>.  <a href="http://api.jquery.com/checked-selector/" rel="nofollow">The jQuery documentation</a> says that the <code>:checked</code> selector wors for checkboxes, radio buttons, and select elements.</p>
  
  <p><strong>Is there any way to fake this so <code>my-checkbox</code> responds to <code>.is(":checked")</code>?</strong></p>
  
  <p>Thanks,</p>
  
  <p>Erik</p>