DOM Property binding for Blazor
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 290
Description
### Is there an existing issue for this?
- [X] I have searched the existing issues
### Is your feature request related to a problem? Please describe the problem.
[Relevant question on SO: How to use @bind (not @bind-Property) or bind on DOM property for custom elements in Blazor?](https://stackoverflow.com/questions/77583025/how-to-use-bind-not-bind-property-or-bind-on-dom-property-for-custom-element) This is also probably related to #45951 but I think a generic feature should solve more use cases.
I have a custom element (`MdTextField` that renders Material Web's ``) that acts similar to ``. Now the problem is, when using `@bind-Value`, what Blazor does is setting its `value` **attribute** and not property. This does not work for the following case (see code with executable snippet on the above StackOverflow question).
With more custom components without attributes or attributes only act as initializing values, we need to be able to bind a DOM property similar to [Lit Component Property Expression](https://lit.dev/docs/templates/expressions/#property-expressions).
### Describe the solution you'd like
Something like this `MyTextField`:
```razor
@(ChildContent)
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter, EditorRequired]
public string Value { get; set; } = "";
[Parameter]
public EventCallback ValueChanged { get; set; }
async Task OnValueChanged(ChangeEventArgs e)
{
Value = e.Value?.ToString() ?? "";
await ValueChanged.InvokeAsync(Value);
}
}
```
Usage:
```
@page "/test"
Clear
@code {
string text = "123";
}
```
And Blazor should perform something like: `el.value = value`.
### Additional context
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.