Styles don't get added if render() returns undefined at point of attach to DOM

[KeithHenry]

Description

If render() returns undefined at the point where it is attached the static get styles() attribute is still called but never gets added to the shadow root.

Live Demo

https://stackblitz.com/edit/lit-element-example-debgxe?embed=1&file=index.js

Steps to Reproduce

The problem happens when you have a control that you don't want to render anything when properties are not set, for instance:

static get styles() { ... }

render() {
    if(!this.thingToRender)
        return;

    return html` ...${this.thingToRender.prop1} ...${this.thingToRender.prop2}  `;
}

If this control is attached to the DOM and then thingToRender is set render() calls as expected and populates the HTML, but the styles are never added.

Returning empty content appears to workaround this:

render() {
    if(!this.thingToRender)
        return html``;

So another option would be to update the documentation to state that render() should never return undefined.

Expected Results

Either the styles should be added on attach, or if skipped because no content it should be added after the first render() that contains content.

Actual Results

Styles are not added to the component.

Browsers Affected

I don't think this is browser specific.

Versions

• lit-element: v2.0.1
• webcomponents: v2.2.7

[jadjoubran]

I can also reproduce this.
Some additional info:

• Doesn't happen on Chrome 73 (because there's support for Constructible stylesheets)
• I can reproduce on Firefox & Safari

In my case, I had the following:

  render() {
    if (!this.questions) {
      return "Loading...";
    }
    ...
}

which I needed to change to:

return html`Loading...`;

I can also see that the styles() method is being called but the styles not being attached

[darionco]

Over 20% of browsers are affected by this bug:
https://gs.statcounter.com/browser-market-share

:(