title: Styles are not applied to the LitElement in Safari/Firefox
body: <p><strong>Update from 01.2020</strong>: It should be fixed with <a href="https://github.com/Polymer/lit-element/pull/712" rel="nofollow noreferrer">https://github.com/Polymer/lit-element/pull/712</a></p>
  
  <p>If <code>undefined</code> returned from <code>render</code> method of <code>LitElement</code> during the first render of the component and then lit-html TemplateResult is returned with some css classes (styles are defined in <code>styles</code> static getter method), these styles are not applied.</p>
  
  <p><a href="https://i.stack.imgur.com/b7MzD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b7MzD.png" alt="enter image description here"></a></p>
  
  <p>There is a simple <a href="https://jsfiddle.net/PavelKozlov/u2dmy4s1/6/" rel="nofollow noreferrer">JSFiddle</a> to reproduce this issue.</p>
  
  <p>If render method returns lit-html TemplateResult after first render of component, then <code>&lt;style&gt;</code> tag exists in shadow DOM.
  <a href="https://i.stack.imgur.com/cstLv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cstLv.png" alt="enter image description here"></a></p>
  
  <p>If render method returns <code>undefined</code> after first render, <code>&lt;style&gt;</code> tag is missed in shadow DOM and never added even if lit-html TemplateResult in next render call.
  <a href="https://i.stack.imgur.com/d8kFk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d8kFk.png" alt="enter image description here"></a></p>
  
  <p>For <strong>Chrome</strong> it works fine. The issue reproduces for <strong>Safari</strong> and <strong>Firefox</strong>.</p>
  
  <p>UPDATE: It should be fixed with <a href="https://github.com/Polymer/lit-element/pull/712" rel="nofollow noreferrer">https://github.com/Polymer/lit-element/pull/712</a></p>