title: Why does the :host selector only work in chrome with platform.js?
body: <p>There's a lot of talk around and about about how to style web components.</p>
  
  <p>For example, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/" rel="noreferrer">http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/</a> suggests that you can use the :host tag to target the component tag itself, while an injected stylesheet with say, h1, should encapsulate the h1 inside the component's shadow dom.</p>
  
  <p>Which is great, and works in chrome.</p>
  
  <p>...but it only works in chrome. </p>
  
  <p>Visiting the url above in firefox doesn't show any of the fancy demo's; and indeed, they flat out don't work at all.</p>
  
  <p>So.</p>
  
  <p><a href="https://github.com/polymer/platform" rel="noreferrer">https://github.com/polymer/platform</a> is theoretically a polyfill that lets you use web components with browsers that don't have native support for all the features needed.</p>
  
  <p>In theory this includes some limited support for CSS rules, see: <a href="http://www.polymer-project.org/platform/shadow-dom.html" rel="noreferrer">http://www.polymer-project.org/platform/shadow-dom.html</a></p>
  
  <p>However, practically speaking it doesn't work. At all. </p>
  
  <p>What's going on here? How can we seriously claim that the platform.js polyfill is working and supports older browsers when you <em>can't style your components</em>?</p>
  
  <p>The best solution I've seen to this is to require the component template to have a known root class node:</p>
  
  <pre><code>&lt;template&gt;
    &lt;style&gt;
      .foo .bar {
         ...
      }     
    &lt;/style&gt;
    &lt;div class='foo'&gt;
       ...
       &lt;div class='bar'&gt;Hi&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;style&gt;  
    .foo .bar { 
      ...
    }
  &lt;/style&gt; 
  </code></pre>
  
  <p>Note that the stylesheet is duplicated both in the template <em>and</em> in the document root context; otherwise firefox, safari and IE styles do not work.</p>
  
  <p>Is this really the level we're at with web component styling?</p>
  
  <p>Am I missing something?</p>
  
  <p>It really seems like this is much <em>much</em> further away from being usable than people are suggesting, even using the most recent versions of every browser.</p>
  
  <p>Here's a pen I've been playing with <a href="http://codepen.io/shadowmint/pen/iyFxE" rel="noreferrer">http://codepen.io/shadowmint/pen/iyFxE</a> that uses platform.js 0.3.4 and shows how this works only in chrome. </p>