Lit 3 automatic calls to requestUpdate confusion

[lideen]

I'm in the middle of upgrading a code base currently using lit 2 to 3 and I'm confused about the behaviour of the new automatic calls to requestUpdate. When overriding inherited accessors the call to requestUpdate does not happen automatically? Is this the intended behaviour or a bug?

import { html, css, LitElement, PropertyDeclarations } from 'lit';

export class Base extends LitElement {
  static properties: PropertyDeclarations = {
    numClicks: { type: Number, state: true },
  };

  protected _numClicks = 0;

  set numClicks(value: number) {
    this._numClicks = value;
  }

  get numClicks() {
    return this._numClicks;
  }

  render() {
    return html`
        <p>You have clicked ${this.numClicks} times</p>
        <button @click="${this.onClickButton}">Click</button>
    `;
  }

  onClickButton() {
    this.numClicks++;
  }
}

export class Child extends Base {
  // static properties: PropertyDeclarations = {
  //   numClicks: { type: Number, state: true },
  // };

  set numClicks(value: number) {
    // const oldValue = this._numClicks;
    this._numClicks = value * 2;
    // this.requestUpdate('numClicks', value);
  }

  get numClicks() {
    return this._numClicks;
  }
}

If I redeclare the property in the child class it is called automatically again, but redeclaring properties is not something we had to do previously. It also works if I call requestUpdate as we already do or use super.numClicks = ... but calling super is not always desirable when behaviour should be replaced completely. Do you have any advise?

Playground: https://stackblitz.com/edit/typescript-sme8a5?file=index.ts

[tbroyer]

The call to requestUpdate is injected into the setter (the setter is redefined that calls the original setter as you wrote it, and then call requestUpdate.
So if you don't call super.numClicks = value, you won't trigger requestUpdate.
So you're seeing the expected behavior.

lit/packages/reactive-element/src/reactive-element.ts

Lines 750 to 761 in c7134a4

	return {
	get(this: ReactiveElement) {
	return get?.call(this);
	},
	set(this: ReactiveElement, value: unknown) {
	const oldValue = get?.call(this);
	set!.call(this, value);
	this.requestUpdate(name, oldValue, options);
	},
	configurable: true,
	enumerable: true,
	};

[lideen]

Thanks for the explanation. I still find it confusing though and easy to get wrong without knowing these details.

[sorvell]

Yeah, I can see how that's a bit confusing. Defining static properties or using @property modifies the property on that class.

Subclases are on their own, so you have 2 options if you don't want to use super....

1. Define the property on the subclass
2. Keep your implementations as-is.

[lideen]

Thanks for the explanation. Yes it's especially confusing as static properties/@property is inherited if the setter is not re-defined.

Superclass properties. Lit automatically applies property options declared by a superclass. You don't need to redeclare properties unless you want to change options.

https://lit.dev/docs/components/properties/

[augustjk]

Right.. Don't need to redeclare unless you actually override the property accessor declared in the superclass as that essentially masks it. Maybe we need to clarify that part of the docs.