Property update triggers an update cycle even if element is disconnected

[madfriend]

Description

After an element is disconnected from the DOM, any property update still triggers an update cycle.

Live Demo

https://stackblitz.com/edit/lit-element-example-raltka?file=index.html

Steps to Reproduce

1. Create my-element
2. Set the mood property (update cycle doesn't start)
3. Append my-element to document.body
4. Set the mood property again - update cycle starts
5. Remove my-element from document.body
6. Update the mood property.

Expected Results

Update cycle is not started and shouldUpdate is not called. (Same as before element is connected)

Actual Results

Update cycle starts and shouldUpdate is called.

Browsers Affected

I've tested in Chrome only, but the bug shouldn't be browser-specific.

• [ x ] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 11
• [ ] Safari 10
• [ ] IE 11

Versions

litelement: 2.4.0 webcomponents: 2.4.4

[sorvell]

This behavior is by design. While it's probably fair that most elements shouldn't update when they are disconnected, we're uncomfortable baking in that assumption. It's true that LitElement does wait until connectedCallback to start the update cycle; however, this is really only done to work around a platform limitation that makes connectedCallback the first reliable spot to ensure all of an element's attributes have run through attributeChangedCallback.

This is also behavior that should be fairly easy to customize in a base class if you want. Something like:

shouldUpdate() {
  // record if a disconnected update was attempted
  this.disconnectedUpdate = !this.isConnected;
  // only update if connected
  return this.isConnected;
}

connectedCallback() {
  super.connectedCallback();
  if (this.disconnectedUpdate) {
    this.requestUpdate();
  }
}