<p dir="auto"><strong>I'm submitting a...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report "><pre class="notranslate"><code class="notranslate">[x] bug report 
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When using the following...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="styles: [`
  :host-context(body) {
    background: red;
  }
`]"><pre class="notranslate"><code class="notranslate">styles: [`
  :host-context(body) {
    background: red;
  }
`]
</code></pre></div>
<p dir="auto">Angular converts this to...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[_nghost-ytw-1]body, body [_nghost-ytw-1] {
  background: red;
}"><pre class="notranslate"><code class="notranslate">[_nghost-ytw-1]body, body [_nghost-ytw-1] {
  background: red;
}
</code></pre></div>
<p dir="auto">the problem here is this...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[_nghost-ytw-1]body"><pre class="notranslate"><code class="notranslate">[_nghost-ytw-1]body
</code></pre></div>
<p dir="auto">it's causing the whole rule to fail so even <code class="notranslate">body [_nghost-ytw-1]</code> will not receive the red background.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
If angular instead wrote the first selector out like the following swapping the order of "body" and "[_nghost-ytw-1]"...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="body[_nghost-ytw-1]"><pre class="notranslate"><code class="notranslate">body[_nghost-ytw-1]
</code></pre></div>
<p dir="auto">the CSS would no longer fail and would be properly applied.</p>
<p dir="auto">So if, the final CSS looked like this...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="body[_nghost-ytw-1], body [_nghost-ytw-1] {
  background: red;
}"><pre class="notranslate"><code class="notranslate">body[_nghost-ytw-1], body [_nghost-ytw-1] {
  background: red;
}
</code></pre></div>
<p dir="auto">the issue would be resolved.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Here is a working example of the issue: <a href="https://plnkr.co/edit/JTFhSPxZDt869RMwkNuC?p=preview" rel="nofollow">https://plnkr.co/edit/JTFhSPxZDt869RMwkNuC?p=preview</a></p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> [all]</li>
</ul>
<p dir="auto">UPD: Given discussion below, apparently the behavior is what it supposed to be. I am not closing, as there might be some more discussion.</p>
<p dir="auto"><strong>I'm submitting a ...</strong>  [x ] bug report</p>
<p dir="auto"><strong>Current behavior</strong><br>
I created a couple of routes with data which I want to use when a router link is clicked:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const routes: Routes = 
[
    {path: 'run', data: {title: &quot;Runner&quot;}, component: RunComponent},
    {path: 'walk', data: {title: &quot;Walker&quot;}, component: WalkComponent}
];"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">routes</span>: <span class="pl-v">Routes</span> <span class="pl-c1">=</span> 
<span class="pl-kos">[</span>
    <span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">'run'</span><span class="pl-kos">,</span> <span class="pl-c1">data</span>: <span class="pl-kos">{</span><span class="pl-c1">title</span>: <span class="pl-s">"Runner"</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">RunComponent</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">'walk'</span><span class="pl-kos">,</span> <span class="pl-c1">data</span>: <span class="pl-kos">{</span><span class="pl-c1">title</span>: <span class="pl-s">"Walker"</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">WalkComponent</span><span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Then in my app I subscribed for ActivatedRoute data to extract the data defined on each route:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  constructor(private route: ActivatedRoute) {
  }
 public ngOnInit() {
     this.routeData= this.route.data.subscribe((data) =&gt; {
       this.name = data.title;
     });
  }"><pre class="notranslate">  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">private</span> <span class="pl-s1">route</span>: <span class="pl-v">ActivatedRoute</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-kos">}</span>
 <span class="pl-en">public</span> <span class="pl-s1">ngOnInit</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
     <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">routeData</span><span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">route</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
       <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">;</span>
     <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">When I click on the link the data object is empty</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I expect the ActivatedRoute to provide data that is defined on the currently active link</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
See Plunker <a href="http://plnkr.co/edit/I62gnvThO0nGN2jk9xhX?p=preview" rel="nofollow">http://plnkr.co/edit/I62gnvThO0nGN2jk9xhX?p=preview</a></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
<li><strong>Router version:</strong> 3.0.0</li>
</ul>