[reactive-element] Leading double underscore in a property name is ignored

[jorg-vr]

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

Properties whose names start with __ are treated as the same property as the property without these underscores.

Use case:
I have an attribute foo that can be set by outside factors:

@property()
foo: string;

And an internal state variable __foo that is related, but should not override the externally set value

@property({state: true})
__foo: string;

when I update __foo, foo is also immediately updated, which should not be the case.

Reproduction

https://lit.dev/playground/#project=W3sibmFtZSI6InJlcHJvLnRzIiwiY29udGVudCI6ImltcG9ydCB7aHRtbCwgY3NzLCBMaXRFbGVtZW50fSBmcm9tICdsaXQnO1xuaW1wb3J0IHtjdXN0b21FbGVtZW50LCBwcm9wZXJ0eX0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5AY3VzdG9tRWxlbWVudCgneC1yZXBybycpXG5leHBvcnQgY2xhc3MgWFJlcHJvIGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIEBwcm9wZXJ0eSgpXG4gIGNvdW50ZXI6IG51bWJlcjtcblxuICBAcHJvcGVydHkoe3N0YXRlOiB0cnVlfSlcbiAgX19jb3VudGVyID0gMDtcblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8cD5jb3VudGVyIGFuZCBfX2NvdW50ZXIgYXJlIGRpZmZlcmVudCB2YXJpYWJsZXMgYW5kIHNob3VsZCBhY3QgaW5kZXBlbmRlbnRseTo8L3A-XG4gICAgICA8YnV0dG9uIEBjbGljaz0ke3RoaXMuX29uQ2xpY2tCdXR0b259PkNsaWNrIG1lPC9idXR0b24-XG4gICAgICA8cD5jb3VudGVyID0gJHt0aGlzLmNvdW50ZXJ9PC9wPlxuICAgICAgPHA-X19jb3VudGVyID0gJHt0aGlzLl9fY291bnRlcn08L3A-XG4gICAgYDtcbiAgfVxuICBcbiAgX29uQ2xpY2tCdXR0b24oKSB7XG4gICAgdGhpcy5fX2NvdW50ZXIrKztcbiAgfVxufVxuIn0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxoZWFkPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3JlcHJvLmpzXCI-PC9zY3JpcHQ-XG48L2hlYWQ-XG48Ym9keT5cbiAgPHgtcmVwcm8gY291bnRlcj01PjwveC1yZXBybz5cbjwvYm9keT5cbiJ9LHsibmFtZSI6InBhY2thZ2UuanNvbiIsImNvbnRlbnQiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcImxpdFwiOiBcIl4yLjAuMFwiLFxuICAgIFwiQGxpdC9yZWFjdGl2ZS1lbGVtZW50XCI6IFwiXjEuMC4wXCIsXG4gICAgXCJsaXQtZWxlbWVudFwiOiBcIl4zLjAuMFwiLFxuICAgIFwibGl0LWh0bWxcIjogXCJeMi4wLjBcIlxuICB9XG59IiwiaGlkZGVuIjp0cnVlfV0

Workaround

I have changed my internal variable name to use a single underscore (eg _foo instead of __foo)

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

Using lit 2.6.1

Browser/OS/Node environment

Browser: Version 100.0 (64-bit)
OS: Linux mint 20.3

[bicknellr]

Seems like this has been an issue since LitElement stopped using Polymer's property updating system:

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

Line 666 in b0c3f82

const key = typeof name === 'symbol' ? Symbol() : `__${name}`;

[rictic]

Fixed by #3693