Add support for <fieldset> like custom elements using ElementInternals

[jpzwarte]

In certain frameworks such as Angular, it is pretty common to split a big form up into separate components. One way of doing this in pure HTML is wrapping multiple form fields into a <fieldset>. The downside of this is that you still have all the markup & associated JS in the same file.

I attempted in using ElementInternals to create a <sub-form> custom elements wrapping a simple <input>. This looked promising:

<form>
  <sub-form name="personal"></sub-form>
  
  <input name="description">
</form>

However, when I try to set the form value for the sub form, I end up with the .toString() value of what I called internals.setFormValue({ name: input.value }) with: personal: [object Object]; description: asdfasdf.

See https://codepen.io/jpzwarte/pen/KKrQzmy for the experiment.

Is what I'm trying reasonable?

[domenic]

Form field values are always strings. That is how they are submitted to the server, using the various form submission formats (e.g. application/x-www-form-urlencoded). So no, setting an object for a form value doesn't make sense. setFormValue() takes a string, and if you give it something that's not a string, it will convert it to one.

[jpzwarte]

@domenic thnx for the quick response. Still trying to understand the problem space here: if I understand correctly, if you have a nested form object ({ personal: { firstName: 'John', lastName: 'Wick' }} etc.) you can't use the native <form> serialisation? You would have to handle it by yourself? (and eventually call fetch(...., { body: JSON.stringify(nestedFormObject) }))