[OnurGumus]

Adds config.formAssociated to LitElement.init, so a [<LitElement>] can take part in the form it's inside.

[<LitElement("my-submit-button")>]
let SubmitButton () =
    let host, _ = LitElement.init (fun config -> config.formAssociated <- true)

    if isNull (box host?internals) then
        host?internals <- host?attachInternals ()

    html $"""<button type="button" @click={Ev(fun _ -> host?internals?form?requestSubmit ())}>Go</button>"""

Why

A form ignores a custom element unless the element's class has static formAssociated = true. Without it, attachInternals() still succeeds, but the internals have no form. Reading .form throws:

NotSupportedError: Failed to read the 'form' property from 'ElementInternals':
The target element is not a form-associated custom element.

Until now there was no way to set it from LitElement.init, so writing a custom input or submit button meant copying the whole LitElement attribute just to add one static getter.

What changes

• LitConfig.formAssociated (default false), with a doc comment.
• LitElementAttribute: when it's set, defines a static formAssociated getter on the class, next to the getters it already defines for properties and styles. Nothing changes for elements that don't set it.
• Docs: a "Forms" section in docsrc/docs/web-components.md.

Tests

test/FormElementTest.fs, two tests:

• the flag reaches the element's definition, and an element that didn't ask for it isn't form-associated;
• a submit button that isn't a <button> submits the <form> it sits in.

With the getter removed, both fail (the second with the NotSupportedError above). dotnet build Fable.Lit.sln and npm test pass (39 tests).

🤖 Generated with Claude Code