UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Create an HTML document with the following HTML:

<div id="host1">This is radio 1</div>
<div id="host2">This is radio 2</div>

<script>
var host = document.querySelector('#host1');
var root = host.createShadowRoot();
root.innerHTML = '<input id="radio-1" type="radio" name="group-1"><label for="radio-1"><content></content></label>';

host = document.querySelector('#host2');
root = host.createShadowRoot();
root.innerHTML = '<input id="radio-2" type="radio" name="group-1"><label for="radio-2"><content></content></label>';
</script>

<div><input id="radio-3" type="radio" name="group-1"><label for="radio-3">This is radio 3</label></div>
<div><input id="radio-4" type="radio" name="group-1"><label for="radio-4">This is radio 4</label></div>

2. Open in recent version of Chrome

What is the expected behavior?
All the radio buttons should be mutually exclusive to each other (since they all have the same name).

What went wrong?
The first two radio buttons, which are each in a separate shadow dom, aren't mutually exclusive (to each other or to the other radio buttons).

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? Yes Up until a few weeks ago (not sure exactly which release broke it).

Does this work in other browsers? N/A 

Chrome version: 51.0.2704.106  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0