Suggest a way to make lit-element reactive properties work with ecma 2022 private fields

Question

Recently we got a new ECMA 2022 standard approved and there is now a syntax to support private fields natively by prefixing # to the name. For years we have been using _ conventionally and now there is some space for confusion of # and _.

The problem: If you now declare a private field and add it to lit-element properties, it would not work. The component will not update on change for a property that is declared with # syntax.

class ExtendedLitElement extends LitElement {
  #somePrivateField
  
  static get properties() {
    return {
      '#somePrivateField': Array,
    }
  }
}

Whenever you do:

this.#somePrivateField = [1, 2, 3];

An element will not be updated. Is there a way to register # prefixed private field as a lit property?

Please provide a script in one piece, so it becomes clear which of the two properties you refer to, and what `this` is. Best a runnable Stack Snippet so we can reproduce the issue just by running it. — trincot, Jul 06 '22 at 12:49

score 3 · Accepted Answer · answered Jul 07 '22 at 00:40

Currently JS class fields, whether public or private, cannot be used for reactive properties. This is due to class fields being defined on the instance whereas reactive properties are defined as accessors on the prototype. Having a class field masks the reactive property accessor.

See: https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields

You would have to continue using _ prefixed reactive properties or manually invoke this.requestUpdate() after setting a class field to trigger an update.

Suggest a way to make lit-element reactive properties work with ecma 2022 private fields

1 Answers1