render() not called after property changes during render()

[simonfuhrmann]

Description

I am experiencing that a property change is not reflected (e.g., render() is not called after the property changed) if the property change is the result of an action that happens during render(). See Live Demo below.

Basically, during render() certain side-effects will happen, e.g., new elements get attached to or removed from the DOM. When elements get attached to the DOM, connectedCallback() of child elements gets executed. Which in turn can emit events to notify the parent about state. Which in turn can be responsible for changing properties in the parent component. These property changes are not reflected.

I am not sure if this is an intentional design decision to prevent infinite render() recursion, but I found this very surprising, dispatching events in connectedCallback() seems a reasonable thing to do. If dispatching these events in firstUpdated(), the property change is reflected as expected. However, this can also cause potential infinite loops.

Live Demo

I hope the following example will illustrate the issue:
https://stackblitz.com/edit/u25pbw (open the console!)

Browsers Affected

• All

Versions

• lit-element: v2.2.1
• webcomponents: v2.2.10

[Westbrook]

Interesting, this seems to be a cleaner and smarter version of an issue I've run into at #721. I never would have thought that the dispatched event was happening DURRING the render() call. 🤔

The documentation does insist that at that moment updates will not be tracked, https://lit-element.polymer-project.org/guide/lifecycle#render but it does seem that we've both found something that should be tracked. I wonder if there's an active workaround for this. Eitherway this seems like something that should be added to the documentation/functionality?

[justinfagnani]

Taking a look. I'll close #721 as it seems the same underlying issue.

[justinfagnani]

One thing you can do is await this.updateComplete in the event handler:

  async onChange(event) {
    console.log('event in parent:', event.detail);
    await this.updateComplete;
    this.state = event.detail;  // Assignment doesn't cause re-render()
  }

[sorvell]

Should be fixed by #555