Add missing lifecycle methods for elements with Custom Element Form Association.

[christian-bromann]

🔍 Search Terms

formDisabledCallback, formResetCallback, formAssociatedCallback, formStateRestoreCallback

✅ Viability Checklist

• [X] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [X] This wouldn't change the runtime behavior of existing JavaScript code
• [X] This could be implemented without emitting different JS based on the types of the expressions
• [X] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• [X] This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• [X] This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

Web components that access the internal form control APIs e.g.:

// Form-associated custom elements must be autonomous custom elements--
// meaning they must extend HTMLElement, not one of its subclasses.
class MyCounter extends HTMLElement {

  // Identify the element as a form-associated custom element
  static formAssociated = true;

  constructor() {
    super();
    // Get access to the internal form control APIs
    this.internals_ = this.attachInternals();
    // internal value for this control
    this.value_ = 0;
  }
  // ...
}

have additional lifecycle events: formDisabledCallback, formResetCallback, formAssociatedCallback, formStateRestoreCallback. Adding these to the DOM types would help get type support for their parameters. I suggest the following interface:

  formDisabledCallback?: (disabled: boolean) => void
  formResetCallback?: () => void
  formAssociatedCallback?: (form: HTMLFormElement) => void
  formStateRestoreCallback?: (state: any, mode: 'restore' | 'autocomplete') => void

You can read more about form element internals in https://web.dev/articles/more-capable-form-controls.

📃 Motivating Example

Providing type safety for custom components.

💻 Use Cases

1. What do you want to use this for? I am working on a component framework library and would love to have type support for these lifecycle events.

2. What shortcomings exist with current approaches? Errors could sneak in because these interfaces aren't documented.

3. What workarounds are you using in the meantime? Extending existing DOM apis.