Support Form-Associated Custom Elements
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 43
- Forks
- 20
- PR merge metrics
- No merged PRs in 30d
Description
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 newformAssociatedCallback,formDisabledCallback,formResetCallback, andformStateRestoreCallback. - 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, maybeinvalid, maybeformdata, and maybesubmit(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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No repository file or test is named in the issue. Start by reading the WHATWG Form-Associated Custom Elements specification and the linked API references, then compare their requirements with XElement's current custom-element behavior. Define which callbacks, attribute/property synchronization, and form-control behaviors are in scope before implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100