title: Polymer CSS ::content selector not working
body: <p>I haven't used Polymer since version 0.5 so I decided to give it a shot again. I've been having some trouble with the :host and ::content selectors, especially given I found that the :host selector only works when my style tag is placed outside the  tag.</p>
  
  <p>Anyway, my problem is that I cannot get the host selector to work unless I specify <code>display: block</code> in my CSS under :host. Second, apparently there isn't a difference between the selectors ":host" and ":host ::content". I'm trying to ONLY style content which is inserted into the content tag without using a wrapper element.</p>
  
  <p>Here is my code from custom-element.html:</p>
  
  <pre><code>&lt;dom-module id="custom-element"&gt;
      &lt;style&gt;
          /* Demonstrating how to specify inserted content
  
             any content added here is styled
          */
          :host ::content
          {
              color: green;
          }
  
          /* This CSS targets the custom-element tag itself */
          :host
          {
              padding: 4px;
              background-color: gray;
          }
      &lt;/style&gt;
  &lt;template&gt;
  
      &lt;!-- Title will be placed here before the content --&gt;
      &lt;h2 id="title"&gt;{{title}}&lt;/h2&gt;
      &lt;!-- Any content inside the tag will be placed here --&gt;
      &lt;content&gt;&lt;/content&gt;
  &lt;/template&gt;
  ....
  </code></pre>
  
  <p>And here is the relevant location where it is used in index.html:</p>
  
  <pre><code>&lt;!-- Auto-binding templates --&gt;
      &lt;template id="t" is="dom-bind"&gt;
          &lt;h1&gt;Your input was &lt;span&gt;{{inputValue}}&lt;/span&gt;&lt;/h1&gt;
          &lt;br&gt;
          &lt;input is="iron-input" bind-value="{{inputValue}}"&gt;
          &lt;input type="button" value="Add to list" onClick="pushItem()"&gt;
  
          &lt;ul&gt;
          &lt;!-- Repeating templates --&gt;
          &lt;!-- Here, the items attribute specifies the array of items to bind to. --&gt;
          &lt;template id="repeatingList" is="dom-repeat" items="{{listItems}}"&gt;
              &lt;!-- This demonstrates that we can find the index and data for every item in the specified array --&gt;
              &lt;li&gt;Array index &lt;span&gt;{{index}}&lt;/span&gt;- &lt;span&gt;{{item}}&lt;/span&gt;&lt;/li&gt;
          &lt;/template&gt;
          &lt;/ul&gt;
          &lt;br&gt;
          &lt;custom-element title="{{inputValue}}"&gt;&lt;p&gt;Lorem ipsum!&lt;/p&gt;&lt;/custom-element&gt;
      &lt;/template&gt;
  </code></pre>
  
  <p>Here's how it appears (the gray background doesn't appear behind the element content and the color should only be applied to the content tag): <a href="https://goo.gl/photos/p2EjTSjySCh2srY78" rel="nofollow">https://goo.gl/photos/p2EjTSjySCh2srY78</a></p>