Calling form.reportValidity() bypasses Shoelace controls

[claviska]

This is expected, but it's an edge case that's worth supporting. Unfortunately, I think this will only be possible by overloading the form's reportValidity() method.

Example: https://codepen.io/oliversalzburg/pen/vYdjxWq

[oliversalzburg]

Maybe this will be of use:

• https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
• https://css-tricks.com/creating-custom-form-controls-with-elementinternals/

[claviska]

Thanks. This is the correct long term solution, but until Safari support lands, we have to use workarounds. There's a polyfill, but it has some limitations, one specifically for reportValidity().

[claviska]

Fixed in af1e440 by adding an overload to the FormSubmitController. Whenever a Shoelace form control is connected to the DOM, its containing form will have its reportValidity() method overloaded.

Again, this won't be necessary with ElementInternals, but for now this is the cleanest way I can think to solve it.

[oliversalzburg]

Woah. That was lightning-fast! Thanks for the quick work 🌟