lit / lit/lit.dev

Cautions around @state properties

Open
#768 0 comments 0 reactions 1 assignee View on GitHub

@arthurevans is already working on this.

Since Apr 26, 2022.

Dominant language
TypeScript
Stars
142
Forks
230
PR merge metrics
No merged PRs in 30d

Description

Language on the decorators page is a little bit misleading. https://lit.dev/docs/api/decorators/#state
- state props can be used in the component's own template, where any compiler prop renaming should be handled correctly.
- But references from _outside_ template systems or imperative JS would break.

Also note that if you need to access the property by a string name--for example, checking:

```
changedProperties.has('statePropertyName');
```

Will fail if you're using a compiler with prop renaming. You can work around this using the compiler's APIs. For example, in closure you'd use `objectProperty('statePropertyName', this)` ...

You also can't refer to the state property from the outside, like:

```

```

This relies on the string name of the property being unchanged. You just shouldn't do this—the state property should be internal to the component.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.