Search code examples
javascripthtmlcssweb-componentlit-element

Styles are not applied to the LitElement in Safari/Firefox

Update from 01.2020: It should be fixed with https://github.com/Polymer/lit-element/pull/712

If undefined returned from render method of LitElement during the first render of the component and then lit-html TemplateResult is returned with some css classes (styles are defined in styles static getter method), these styles are not applied.

enter image description here

There is a simple JSFiddle to reproduce this issue.

If render method returns lit-html TemplateResult after first render of component, then <style> tag exists in shadow DOM. enter image description here

If render method returns undefined after first render, <style> tag is missed in shadow DOM and never added even if lit-html TemplateResult in next render call. enter image description here

For Chrome it works fine. The issue reproduces for Safari and Firefox.

UPDATE: It should be fixed with https://github.com/Polymer/lit-element/pull/712

Solution

  • The solutions is to make sure you always return lit-html TemplateResult from render method even if it's empty!

    render() {
   return html``;
}

    But I don't fully understand why exactly this issue appears? Could somebody clarify?