DEV Community

Discussion on: Web components in 2021: the Good, the Bad and the Ugly

Collapse
 
christianulbrich profile image
Christian Ulbrich

While in theory the form-associated API is the right™ choice, its current support is limited (only Chrome). However it is not so hard, to support Submit, Reset interaction of CustomElements. You simply grab your closest() <form> (and of course piercing any ShadowDOM you might encounter) and then simply listen for Submit or Reset events and act accordingly:

  • reset your components to some initial state for a reset
  • add your hidden inputs mirroring your serialized data to the DOM of the aforementioned form either on submit or, simply synchronize them on every change