Support Form-Associated Custom Elements

[theengineear]

Form-Associated Custom Elements have been implemented in Chrome 77+ (no other browsers yet though). Form controls have different behaviors and needs compared to most other Custom Elements we're used to working with.

Here's a short rundown of things we need to keep in mind:

• Decoupling of attributes and properties (note that the specifications typically refer to these as "content attributes" and "IDL attributes" respectively). Consider the "value" attribute which has very different behavior than the "value" property. Or, the "form" attribute and the "form" property.
• Similar to adoptedCallback (which we don't actually use), define prototype methods for the new formAssociatedCallback, formDisabledCallback, formResetCallback, and formStateRestoreCallback.
• Consider mechanisms to support synchronous property-attribute syncing. Form controls have attributes and properties which remain perfectly in sync. Because it's always possible for a user to click the "submit" button while currently-focusing a form control, we need to consider synchronous changes that happen during event handling. E.g., the browser will fire input, change, maybe invalid, maybe formdata, and maybe submit (in that order). Depending on the timing, debouncing changes on a microtask might cause problems! In the specification, the properties are discussed as "reflecting the attributes", not the other way around. This nuance might cause headaches for us if we are in the habit of doing lazy computation / observation / and reflection.

It's also important to put bounds on what we want and need from XElement — perhaps custom form control authorship is nuanced enough that attempting to support it would ultimately make XElement less useful for the other 99% of cases we use it for! It's completely possible to write a form control from scratch using vanilla JS.

References:

Form Participation API Explained Chrome Platform Status Mozilla Bug WHATWG Specification

[theengineear]

👋 — Just opening up this issue to serve as a reference while we start to think about form-associated custom elements.