title: Using :host-context() with an adjacent sibling selector
body: <p>I'm trying to use :host-context() and adjacent sibling selectors to style an element like this:</p>
  
  <pre><code>&lt;x-foo id="1" active&gt;&lt;/x-foo&gt;
  &lt;x-foo id="2"&gt;&lt;/x-foo&gt; &lt;!-- use :host-context() to target #2 when adjacent sibling, #1 is [active] --&gt;
  &lt;x-foo id="3"&gt;&lt;/x-foo&gt;
  </code></pre>
  
  <p>My element definition looks something like:</p>
  
  <pre><code>&lt;dom-module id="x-foo"&gt;
      &lt;template&gt;
          &lt;style&gt;
             :host-context(x-foo[active] + x-foo) {
                 background-color: yellow;
             }
          &lt;/style&gt;
          Hello
      &lt;/template&gt;
      &lt;script src="x-foo.js"&gt;&lt;/script&gt;    
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>However this doesn't quite work. Why not?</p>