Interface FormAssociatedCustomElement

Lifecycle callbacks A map, whose keys are the strings "connectedCallback", "disconnectedCallback", "adoptedCallback", "attributeChangedCallback", "formAssociatedCallback", "formDisabledCallback", "formResetCallback", and "formStateRestoreCallback" https://html.spec.whatwg.org/multipage/custom-elements.html#concept-custom-element-definition-lifecycle-callbacks

A form-associated custom element API includes a set of extra lifecycle callbacks to tie in to the form lifecycle. The callbacks are optional: only implement a callback if your element needs to do something at that point in the lifecycle. https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit

interface FormAssociatedCustomElement {
    adoptedCallback(): void;
    attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    formAssociatedCallback(form: null | HTMLFormElement): void;
    formDisabledCallback(disabled: boolean): void;
    formResetCallback(): void;
    formStateRestoreCallback(
        value: any,
        mode: "autocomplete" | "restore",
    ): void;
}

Hierarchy (View Summary)

Methods

  • Called after the disabled state of the element changes, either because the disabled attribute of this element was added or removed; or because the disabled state changed on a

    that's an ancestor of this element. The disabled parameter represents the new disabled state of the element. The element may, for example, disable elements in its shadow DOM when it is disabled.

    Parameters

    • disabled: boolean

    Returns void

  • Called after the form is reset. The element should reset itself to some kind of default state. For elements, this usually involves setting the value property to match the value attribute set in markup (or in the case of a checkbox, setting the checked property to match the checked attribute.

    Returns void

  • Called in one of two circumstances: When the browser restores the state of the element (for example, after a navigation, or when the browser restarts). The mode argument is "restore" in this case.

    When the browser's input-assist features such as form auto filling sets a value. The mode argument is "autocomplete" in this case.

    The type of the first argument depends on how the setFormValue() method was called. For more details, see Restoring form state.

    Parameters

    • value: any
    • mode: "autocomplete" | "restore"

    Returns void