LitElement：从 attributeChangedCallback() 调用 requestUpdate() 不会更新（渲染）

Question

当我在更改 classMap 后从 attributeChangedCallback(...) 中调用 this.requestUpdate() 时，渲染函数没有被调用。

当我用超时调用它时，它似乎确实有效。这是方法还是错误？

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); 
}

似乎也有效的是等待 updateComplete 承诺使用这个：

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

但还是本末倒置的感觉

Answer 1

我上面描述的行为似乎与属性改变结合反射有关。有关详细信息，请参阅 LitElement GitHub 存储库中的 issue。

Answer 2

你应该使用await element.updateComplete.then(() => this.requestUpdate());

LitElement：从 attributeChangedCallback() 调用 requestUpdate() 不会更新（渲染）

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

web-component

polymer

lit-element