lit / lit/lit.dev

[docs] Document gotchas around input element's `value` `checked` attribute

Open
#1,058 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

It's easy for users to do an attribute binding with reactive properties for `value` or `checked` for `` elements instead of property bindings and expect them to update. Sometimes it feels like this works because the element does update based on the attribute until the user interacts with the element, at which point only changing the property updates the element.

Documenting this gotcha and suggestion to do a property binding with `.` would be nice.

Semi-related to this is wanting to reset the input value with a `requestUpdate()` after user interaction and not seeing it update which requires the `live()` directive.

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.

Research direction

No documentation file is named. Start by locating the input element binding guidance and the live() directive documentation, then explain the value and checked attribute-versus-property gotcha and when live() is needed after interaction. Done means both scenarios and the property-binding suggestion are clearly documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
documentation, frontend
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.