Blazor中如何为自定义元素绑定DOM属性而非HTML属性？

问题本质 #

Blazor的@bind-Value默认通过setAttribute操作HTML属性，但Material Web的<md-filled-text-field>这类自定义元素依赖DOM的value属性更新显示内容，而非HTML属性。因此直接使用@bind-Value会出现：用户输入后，通过HTML属性更新无法同步到输入框显示的问题。

解决方案1：自定义双向绑定逻辑（无JS依赖） #

通过Blazor内置的ElementReference.SetPropertyAsyncAPI直接操作DOM属性，同时手动处理输入事件实现双向绑定，效果和标准<input>的@bind一致。

包装组件示例（MdTextField.razor）

<md-filled-text-field @ref="_textFieldRef" @oninput="HandleInput"></md-filled-text-field>

@code {
    private ElementReference _textFieldRef;
    private string _currentValue;

    [Parameter]
    public string Value
    {
        get => _currentValue;
        set
        {
            if (_currentValue != value)
            {
                _currentValue = value;
                _ = UpdateTextFieldValue();
            }
        }
    }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private async Task HandleInput(ChangeEventArgs e)
    {
        _currentValue = e.Value?.ToString() ?? string.Empty;
        await ValueChanged.InvokeAsync(_currentValue);
    }

    private async Task UpdateTextFieldValue()
    {
        if (!_textFieldRef.Equals(default))
        {
            // 直接更新DOM的value属性，而非HTML属性
            await _textFieldRef.SetPropertyAsync("value", _currentValue);
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await UpdateTextFieldValue();
        }
    }
}

使用方式

像标准输入组件一样直接用@bind-Value：

<MdTextField @bind-Value="MyInputValue"></MdTextField>

@code {
    private string MyInputValue = "初始内容";
}

解决方案2：适配Blazor的属性映射逻辑 #

如果需要直接使用<md-filled-text-field>标签而不封装组件，最可靠的方式还是通过上述包装组件，将@bind-Value的属性更新逻辑转换为DOM属性操作——这是避免JS依赖且适配Blazor绑定机制的最优路径。

核心原理 #

Blazor的SetPropertyAsync是官方提供的操作DOM属性的API，完全基于.NET代码实现，不需要编写任何JavaScript，完美满足避免JS依赖的需求。

内容的提问来源于stack exchange，提问作者Luke Vo