Form controls: why type="module" required for validation and preventDefault

[trailsnail]

Hi,

take the codepen example from https://shoelace.style/getting-started/form-controls?id=required-fields and remove type="module" from <script> Tag.
Submit the form: despite validation of the fields the code after event.preventDefault(); is executed.

My question is: why? 😄

Thanks for helpful answers.

[claviska]

Scripts with type="module" are deferred, whereas scripts without it are executed synchronously. Until ElementInternals lands, Shoelace needs to use a reactive controller to handle form submissions.

shoelace/src/internal/form.ts

Lines 49 to 50 in 01eb84e

	this.form.addEventListener('formdata', this.handleFormData);
	this.form.addEventListener('submit', this.handleFormSubmit);

Unfortunately, that means it's possible to attach listeners that execute before the controller's listeners. It's something we need to workaround until we can use ElementInternals to make Shoelace form controls first-class citizens.

You might recall in previous versions there was an <sl-form> element. This was necessary because support for the formdata event wasn't good enough at the time. So the library is inching closer and closer to native behaviors as the specs evolve and as browser support allows.

I hope that helps!

[trailsnail]

Thanks for this. More clear now