LitElement: Calling requestUpdate() from attributeChangedCallback() doesn't update (render)

Question

When I call this.requestUpdate() from within attributeChangedCallback(...) after I changed a classMap the render function is not called.

When I call it with a timeout it does seem to work. Is this the way to do it or is this a bug?

attributeChangedCallback(name: string, oldVal: AttributeType, newVal: AttributeType) {
    super.attributeChangedCallback(name, oldVal, newVal);

  ...
  
  this.myClassMap = {
    ...this.myClassMap,
    foo: newValueBasedOnChangedProperty,
  }

  // this doesn't seem to do anything
  this.requestUpdate(); 
  
  // this does trigger a re-render
  setTimeout(() => this.requestUpdate(), 0); 
}

What also seems to work is waiting for the updateComplete promise using this:

this.updateComplete.then(
  () => this.requestUpdate()
);

But it still feels like I'm putting the cart before the horse.

Answer 1

The behaviour I described above seems to be related to property changing in combination with reflection. See this issue on the LitElement GitHub repo for more info.