https://try.mudblazor.com/snippet/maGfkWbmxyocFFic


value-onchange는 양방향바인딩이 되는데 커스텀 이벤트 인식시키는법을 모르겠음...
지정된 이름의 .lib.module.js 를 넣고 뭐 난리쳐야하는듯 함.

<wc-test @bind=b @bind-2=b2></wc-test>
<p>@(new{ b, b2 })</p>
@code {
    string b, b2;
}
<p>b: <input @bind=b /></p>
<p>b2: <input @bind=b2 /></p>

<script>
customElements.define('wc-test', class extends HTMLElement {
    constructor() {
        super();

        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.innerHTML = `
            <input type="text" id="b" />
            <input type="text" id="b2" />
        `;
        this.b = shadowRoot.querySelector('#b');
        this.b2 = shadowRoot.querySelector('#b2');
        this.b.addEventListener('change', e => {
            this.setAttribute("value", e.target.value);
            this.dispatchEvent(new Event('change'));
        });
        this.b2.addEventListener('change', e => {
            this.setAttribute("value2", e.target.value);
            this.dispatchEvent(new CustomEvent('change2', { bubbles: true }));
        });
    }
    get value() { return this.b.value; }
    get value2() { return this.b2.value; }
    static observedAttributes = ["value", "value2"];
    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'value') this.b.value = newValue;
        if (name === 'value2') this.b2.value = newValue;
    }
});
Blazor.r/e/g/i/s/t/erCustomEventType('change2', {
    browserEventName: 'change2',
    createEventArgs: e => {
        console.log(e.target.b2.value);
        return { value2: e.target.b2.value };
    }
});
</script>


using Microsoft.AspNetCore.Components;

[BindElement("wc-test", null, "value", "onchange")]
[BindElement("wc-test", "2", "value2", "onchange2")]
public static class BindAttributes;

[EventHandler("onchange2", typeof(Change2EventArgs), true, true)]
public static class EventHandlers;

public class Change2EventArgs : ChangeEventArgs
{
    public object? Value2 { get; set; }
}