---
+The form-associated custom elements APIs enable custom elements to participate in form submission and validation lifecycles.
ElementInternals which includes the form-associated custom elements behavior; however, the initial PR doesn't include the actual form-association APIs.
+ Summary or proposal based on current status; paragraph(s) and code.
+The form-associated custom elements APIs are implemented within the attachInternals method on the HTMLElement prototype. Calling attachInternals returns an instance of an ElementInternals object which grants developers the ability to interact with form elements provided they designate their element as a form-associated element.
+
+
+ %gt;form>
+ %gt;fancy-input name="fancy">%gt;/fancy-input>
+ %gt;/form>
+
+ %gt;script>
+ class FancyInput extends HTMLElement {
+ static get formAssociated() {
+ return true;
+ }
+
+ constructor() {
+ super();
+ this.#internals = this.attachInternals();
+ this.#internals.setFormValue('I can participate in a form!');
+ }
+ }
+
+ customElements.define('fancy-input', FancyInput);
+
+ document.querySelector('form').addEventListener('submit', event => {
+ event.preventDefault();
+ const formData = new FormData(event.target);
+
+ console.log(formData.get('fancy')); // logs 'I can participate in a form!'
+ });
+ %gt;/script>
+
+
+ The setFormValue method can accept several types of data including strings, FileData and FormData objects, the latter of which can allow a nested form to participate with a parent in its entirety.
In addition to providing an method for adding a value to a form object, the form-associated APIs provide a surface to allow custom elements to participate in form validation.
+
+
+class FancyInput extends HTMLElement {
+ static get formAssociated() {
+ return true;
+ }
+
+ constructor() {
+ super();
+ const root = this.attachShadow({ mode: 'open' });
+ this.#internals = this.attachInternals();
+ this.#internals.setFormValue('I can participate in a form!');
+ const button = document.createElement('button');
+ root.append(button);
+
+ button.addEventListener('click', this.#onClick);
+ this.button = button;
+ }
+
+ #onClick = () => {
+ if (this.#internals.invalid) {
+ this.#internals.setValidity(); // Marks the element as valid
+ } else {
+ this.#internals.setValidity({
+ customError: true
+ }, 'You must click the button', this.button); // Marks the element as invalid and will focus on the button when the form checks validity
+ }
+}
+
+
---
-FormData object, adding to the HTMLFormElement.prototype.elements object and in other submission formats.CustomStateSet
+ formStateRestoreCallback callback only for restore events (such as back button or page refresh), but does not call the custom element reaction for autocomplete. Firefox currently does not ship any code referencing the formStateRestoreCallback.
+
+