Unclear how to collect form data on submit when rendered by Lit element

[BalusC]

Initial and natural attempt based on my experience with all other frameworks I previously worked with:

private item: MyCustomInterface | undefined;

override render(): TemplateResult | undefined {
    if (!this.item) {
        return;
    }

    return html`
        <form @submit="${this.submit}">
            <sl-input value="${this.item.foo}" required></sl-input>
            <sl-input value="${this.item.bar}" required></sl-input>
            <sl-button type="submit">submit</sl-button>
        </form>
    `;
}

private submit(event: SubmitEvent): void {
    event.preventDefault();
    console.log(this.item); // No changes at all.
}

How do I collect input values here?

Straightforward attempt with FormData also didn't work. It returns empty.

const form = this.shadowRoot!.querySelector("form")!;
const formData = new FormData(form);
console.log(formData); // {}

There are no working examples at https://shoelace.style/getting-started/form-controls for this case either.

Using .value="${...}" instead of value="${...}" also didn't change anything.

[KonnorRogers]

Ohhhhhh okay. Took me a while to figure out what you're asking for here.

You're looking for 2 way data binding.

So what you need to do is add an event listener and then update the property via reassignment (or could use requestUpdate)

Lit doesn't have anything built in for this like a v-model or ngModel.

Also, make sure to add name to the inputs:

https://codepen.io/paramagicdev/pen/NWQbrwd

[BalusC]

You're looking for 2 way data binding.

Indeed. I already understood this is beyond the capacity of Shoelace. So I had to create a custom <my-form> element which automatically updates the model values. Would be nice if there was a <sl-form> which handles this transparently. The codepen which you have there is also a nice alternative, especially if you demand the model values to be updated immediately rather than waiting for the form to be submitted. It's only boilerplate-y which works only nicely when all kinds of Shoelace inputs are wrapped inside yet another custom element like <my-input type="...">. Thanks.