<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">AFAIK, this is a bug.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When setting <code class="notranslate">checked</code> on a checkbox, the checkbox indeed is checked, but the attribute isn't actually in the DOM. This means that checkbox will be targeted by <code class="notranslate">:checked</code>, but not <code class="notranslate">[checked]</code>. In my case, it is a blocker regarding Selenium-powered tests as we use XPath to target elements and <code class="notranslate">[@checked]</code> therefore doesn't work either.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/reactjs/69z2wepo/" rel="nofollow">https://jsfiddle.net/reactjs/69z2wepo/</a>).</strong></p>
<p dir="auto">Check this out: <a href="https://jsfiddle.net/cw4hjLav/1/" rel="nofollow">https://jsfiddle.net/cw4hjLav/1/</a></p>
<p dir="auto">Quick copypasta from my browser console (I ran those right after loading the fiddle):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="document.querySelector('input[type=checkbox]')
&lt;input type=​&quot;checkbox&quot;&gt;​
document.querySelector('input[type=checkbox]:checked')
&lt;input type=​&quot;checkbox&quot;&gt;​
document.querySelector('input[type=checkbox][checked]')
null"><pre class="notranslate"><code class="notranslate">document.querySelector('input[type=checkbox]')
&lt;input type=​"checkbox"&gt;​
document.querySelector('input[type=checkbox]:checked')
&lt;input type=​"checkbox"&gt;​
document.querySelector('input[type=checkbox][checked]')
null
</code></pre></div>
<p dir="auto">The behaviour is the same with <code class="notranslate">defaultChecked</code>.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The <code class="notranslate">checked</code> attribute actually is in the DOM whenever relevant.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">Tried this out with React 15 (the fiddle uses 15.0.1, my app uses 15.1.0), with both Firefox 47.0 and Chromium 50 on Ubuntu 16.04.</p>
<p dir="auto">I previously stumbled upon <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="56148622" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/3005" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/3005/hovercard" href="https://github.com/facebook/react/issues/3005">#3005</a> but didn't find the answer there, as my issue doesn't seem to be <code class="notranslate">preventDefault()</code>-related. Thanks a lot!</p>
<p dir="auto">Adding a <code class="notranslate">ref</code> to a child element of a stateless component yields a <strong>caught TypeError: Cannot read property 'refs' of null</strong>. I can see this being really hard to debug. Could there be a better error message there ?</p>