title: <template> + querySelector using :scope pseudo class works with document but not documentFragment
body: <p>Depending on the content of a <code>&lt;template&gt;</code>, I want to wrap its contents in a container for easier/consistent traversal. If the contents are <code>&lt;style&gt;</code> and <code>&lt;one-other-element&gt;</code> at the top level, I'll leave it be. Otherwise, whatever's in there will get wrapped in a <code>&lt;div&gt;</code>.</p>
  
  <p>Originally I made my code something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var hasCtnr = template.content.querySelector(':scope &gt; :only-child, :scope &gt; style:first-child + :last-child') != null;
  </code></pre>
  
  <p>But, I noticed it wasn't working -- that is, <code>hasCtnr</code> was always <code>false</code>. So, I made a <a href="http://jsfiddle.net/xcj2vc4y/" rel="nofollow">reduced test case (jsfiddle)</a>. As you can see, <code>:scope</code> works with regular DOM elements. However, it doesn't seem to work with <code>DocumentFragment</code>s. <strong>I know the technology is new/experimental but is this a bug or am I doing something wrong?</strong></p>
  
  <p>If I use jQuery, it works... but my guess is because jQuery is doing something manually.</p>
  
  <pre class="lang-js prettyprint-override"><code>var hasCtnr = !!$(template.content).children(':only-child, style:first-child + :last-child').length;
  </code></pre>
  
  <p>I only care about Chrome/<a href="http://electron.atom.io/" rel="nofollow">Electron</a> support, by the way.</p>
  
  <p>Here's the jsfiddle inline:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var nonTmplResult = document.querySelector('#non-template-result');
  var tmplResult = document.querySelector('#template-result');
  
  var grandparent = document.querySelector('#grandparent');
  var parent = document.querySelector('#parent');
  var child = document.querySelector('#child');
  
  var who = grandparent.querySelector(':scope &gt; div');
  if (who === parent) {
      nonTmplResult.innerHTML = 'parent as expected, :scope worked';
  } else if (who === child) {
      nonTmplResult.innerHTML = "child (unexpected), :scope didn't work";
  }
  
  
  var tmpl = document.querySelector('template');
  var content = tmpl.content;
  
  var proto = Object.create(HTMLElement.prototype);
  
  var hasCtnr = content.querySelector(':scope &gt; div'); // this and even ':scope div' results in null, 'div' results in DIV
  tmplResult.innerHTML += hasCtnr == null ? "null for some reason, :scope didn't work" : hasCtnr.nodeName + ', :scope worked'; // Why is this null..?
  tmplResult.innerHTML += '&lt;br/&gt;';
  
  proto.createdCallback = function() {
      var clone = document.importNode(content, true);
      var root = this.createShadowRoot();
      root.appendChild(clone);
      var rootHasCtnr = root.querySelector(':scope &gt; div'); // ':host &gt; div' seems to work but I prefer this check to happen once (above) so createdCallback can be efficient as I'll likely have many custom elements
      tmplResult.innerHTML += rootHasCtnr == null ? "null again, :scope didn't work" : rootHasCtnr.nodeName + ', :scope worked'; // Why is this also null..?
  };
  
  document.registerElement('x-foo', { prototype: proto });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#non-template-result {
      background: red;
      color: white;
  }
  #template-result {
      background: green;
      color: springgreen;
  }
  * /deep/ * {
      margin: 10px;
      padding: 5px;
  }
  #grandparent {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="grandparent"&gt;
      &lt;div id="parent"&gt;
          &lt;div id="child"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="non-template-result"&gt;????&lt;/div&gt;
  &lt;div id="template-result"&gt;&lt;/div&gt;
  &lt;x-foo&gt;
      &lt;p&gt;I should be dark golden rod with khaki text.&lt;/p&gt;
  &lt;/x-foo&gt;
  
  &lt;template&gt;
      &lt;style&gt;
          :host {
              background: blue;
              display: block;
          }
          :host &gt; div &gt; p {
              color: white;
          }
          ::content &gt; p {
              background: darkgoldenrod;
              color: khaki;
          }
      &lt;/style&gt;
      &lt;div&gt;
          &lt;p&gt;I should be blue with white text&lt;/p&gt;
          &lt;content&gt;&lt;/content&gt;
      &lt;/div&gt;
      
  &lt;/template&gt;
  
  &lt;a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox"&gt;Enabling Web Components in Firefox&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>