Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add docs for defaultValue #1396

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add docs for defaultValue #1396

wants to merge 1 commit into from

Conversation

sorvell
Copy link
Member

@sorvell sorvell commented Feb 4, 2025

Adds docs for lit/lit#4895. Publish on after that release.

@sorvell sorvell requested a review from justinfagnani February 4, 2025 19:11
Copy link

github-actions bot commented Feb 4, 2025

A live preview of this PR will be available at the URL(s) below.
The latest URL will be appended to this comment on each push.
Each build takes ~5-10 minutes, and will 404 until finished.

https://pr1396-39b25a0---lit-dev-5ftespv5na-uc.a.run.app/

Copy link
Contributor

@justinfagnani justinfagnani left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

import {customElement, property} from 'lit/decorators.js';

@customElement('my-element')
class MyElement extends LitElement {
@property({type: Boolean, reflect: true})
active: boolean = false;

@property({type: String, reflect: true, defaultValue: 'normal'} as PropertyDeclaration)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this cast only needed until lit/lit#4895 is released?

@@ -129,10 +129,13 @@ class MyElement extends LitElement {
}
```

In **JavaScript**, you **must not use class fields** when declaring reactive properties. Instead, properties must be initialized in the element constructor:
In **JavaScript**, you **must not use class fields** when declaring reactive properties. Instead, properties must be either initialized in the element constructor or set with the `defaultValue` option:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While you're here "Instead" reads a little unclearly to me. I think saying "to initialize properties" would help somewhere. Also, "JavaScript" now has decorators via Babel at least, so maybe we update that phrase too.

Maybe:

Suggested change
In **JavaScript**, you **must not use class fields** when declaring reactive properties. Instead, properties must be either initialized in the element constructor or set with the `defaultValue` option:
If you are declaring reactive properties with the static properties class field, and not using decorators, you **must not use class fields** for those properties. Class fields will overwrite the properties in the static properties class field, disabling reactivity. To initialize a reactive property, do so in the element constructor or set the `defaultValue` option:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants