title: direct child css selector in polymer
body: <p>Inside a class derived from polymerElement, I have this code</p>
  
  <pre><code>class SelectorTest extends PolymerElement {
    static get template() {
      return html`
        &lt;style&gt;
          :host &gt; * {
            display: block;
            margin-top: 5px;
          }
        &lt;/style&gt;
     `
    }
  </code></pre>
  
  <p>Looks like the "greater than" symbol in <strong>:host > "</strong> clashes with the  <strong>"&lt; style >"</strong>, and the final result is that the css is visible in the rendered page</p>
  
  <p><strong>screenshot of the rendered page</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ZmYGR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZmYGR.png" alt="renderer page"></a></p>
  
  <p>If I remove the critical CSS selector, everything works fine.</p>
  
  <p>So I assume that I need to somehow escape the ">".</p>
  
  <p>The question is : how do I escape it ?</p>