Calling requestUpdate() from attributeChangedCallback() doesn't update.

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

When I call this.requestUpdate() within 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.

Versions

• lit-element: v2.4.0

[sorvell]

OK, I was able to reproduce this if the attribute is reflected and is changing as a result of the property being set and implemented a fix here: https://stackblitz.com/edit/lit-element-demo-wdpubo?file=src%2Fmy-element.js.

In this case we are setting the attribute during and update and therefore attributeChangedCallback is called during the update so that requestUpdate does not queue an additional update.

In this case, I would suggest not putting your code into attributeChangedCallback but instead putting it in render or update or updated.

update(changedProperties) {
  if (changedProperties.has(propertyWithNewValue)) {
    this.myClassMap = {
      ...this.myClassMap,
      foo: newValueBasedOnChangedProperty,
    };
  }
}

If you also have an attribute that is not tied to a reactive property, you can manually call this.requestUpdate() in attributeChangedCallback to ensure that an update is processed.

If you need to respond based on rendering having occurred, you can put this code into updated instead.

Hope that helps.

[Halt001]

I can also confirm that your suggested workaround works in our Angular app. Thank you for your help.