如何在Blazor中实现自定义HTML元素的属性双向绑定？

问题说明 #

需要在Blazor中对自定义HTML元素<bonsai-text-box>的value属性实现双向绑定，但使用@bind和@bind-value未达到预期效果。

核心问题分析 #

Blazor对自定义元素的双向绑定有明确要求：

• 当元素属性值变化时，必须触发对应的[属性名]changed事件（例如valuechanged），且事件需携带新值
• 自定义元素的属性与内部状态需保持同步，避免循环更新

你的现有JavaScript代码未正确触发Blazor能识别的valuechanged事件，导致绑定失效。

解决方案 #

1. 修改自定义元素的JavaScript代码

更新代码以满足Blazor的双向绑定要求，重点是触发正确的事件并同步状态：

customElements.define(
"bonsai-text-box",
class extends HTMLElement {
    static observedAttributes = ["label", "value"];
    constructor() {
        super();
        this.inputNode = null;
    }

    async connectedCallback() {
        // 保留原有模板与样式加载逻辑
        let html = await fetch("https://nexusdockapidev.ctdi.com/GetBonsaiHTML");
        let json = await html.json();
        let div = document.createElement('div');
        div.innerHTML = json.html;
        this.appendChild(div);
        let template = document.getElementById("text");
        let templateContent = template.content;

        const label = this.getAttribute("label");
        const labelSpan = document.createElement("span");
        labelSpan.setAttribute("slot", "label");
        labelSpan.setAttribute("id", "labelspan");
        labelSpan.innerHTML = label;

        const shadowRoot = this.attachShadow({ mode: "open" });

        let css = await fetch("https://nexusdockapidev.ctdi.com/GetBonsaiCSS");
        let cssjson = await css.json();
        let style = document.createElement('style');
        style.innerHTML = cssjson.css;
        shadowRoot.appendChild(style);

        shadowRoot.appendChild(templateContent.cloneNode(true));
        this.appendChild(labelSpan);

        this.inputNode = this.shadowRoot.querySelector('input');
        // 改用input事件实现实时同步（change事件仅在失焦时触发）
        this.inputNode.addEventListener("input", (e) => {
            const newValue = e.target.value;
            // 更新元素属性
            this.setAttribute("value", newValue);
            // 触发Blazor可识别的valuechanged事件
            this.dispatchEvent(new CustomEvent("valuechanged", { 
                detail: newValue,
                bubbles: true,
                cancelable: true
            }));
        });
    }

    get value () {
      return this.inputNode?.value ?? this.getAttribute("value") ?? "";
    }
  
    set value (newValue) {
      if (this.inputNode) {
        this.inputNode.value = newValue;
      }
      this.setAttribute("value", newValue);
      // 外部通过属性赋值时也触发事件
      this.dispatchEvent(new CustomEvent("valuechanged", { 
          detail: newValue,
          bubbles: true,
          cancelable: true
      }));
    }

    attributeChangedCallback(name, oldValue, newValue) {
        // 避免重复处理相同值
        if (oldValue === newValue) return;
        
        if (name === "label") {
            const oldlabelspan = this.querySelector("#labelspan");
            if (oldlabelspan) {
                oldlabelspan.parentNode.removeChild(oldlabelspan);
            }
            const labelSpan = document.createElement("span");
            labelSpan.setAttribute("slot", "label");
            labelSpan.setAttribute("id", "labelspan");
            labelSpan.innerHTML = newValue;
            this.appendChild(labelSpan);
        }
        else if (name === 'value') {
            // 仅当内部input值与新属性值不一致时更新，避免循环
            if (this.inputNode && this.inputNode.value !== newValue) {
                this.inputNode.value = newValue;
            }
        }
    }
},
);

2. 在Blazor组件中使用双向绑定

现在可以通过两种方式实现绑定：

方式一：使用@bind-value（推荐）

指定valuechanged事件让Blazor识别双向绑定：

<bonsai-text-box @bind-value="@MyValue" @bind-value:event="valuechanged"></bonsai-text-box>

@code {
    private string MyValue { get; set; } = "初始值";
}

方式二：手动绑定属性与事件

如果自动绑定不生效，可以手动处理：

<bonsai-text-box value="@MyValue" @onvaluechanged="HandleValueChanged"></bonsai-text-box>

@code {
    private string MyValue { get; set; } = "初始值";

    private void HandleValueChanged(ChangeEventArgs e)
    {
        MyValue = e.Value?.ToString() ?? string.Empty;
    }
}

关键要点 #

• Blazor依赖属性名 + changed格式的事件（如valuechanged）实现自定义元素双向绑定，事件需通过CustomEvent的detail字段传递新值
• 使用input事件替代change事件可实现实时同步，提升交互体验
• 确保元素属性与内部input状态同步，避免重复更新或循环触发事件

内容的提问来源于stack exchange，提问作者jon booraem