From 074823b43c46a7ecc15d3f015cceb6473a0f185c Mon Sep 17 00:00:00 2001 From: "Caleb D. Williams" Date: Sat, 20 Aug 2022 08:19:33 -0500 Subject: [PATCH 1/2] feat: add form-associated custom elements content --- reports/2022.html | 134 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 122 insertions(+), 12 deletions(-) diff --git a/reports/2022.html b/reports/2022.html index 7d197ca..ed4c45f 100644 --- a/reports/2022.html +++ b/reports/2022.html @@ -23,6 +23,10 @@ name: "Alan Dávalos", url: "https://github.com/alangdm", }, + { + name: "Caleb Williams", + url: "https://github.com/calebdwilliams" + } ], github: "w3c/webcomponents-cg", shortName: "webcomponents-cg", @@ -199,51 +203,157 @@

Links

Previous WCCG Report(s)
2021
GitHub issues:
-
---
+
https://github.com/whatwg/html/issues
Browser positions:
-
---
+
+ +

Description

-

---

+

The form-associated custom elements APIs enable custom elements to participate in form submission and validation lifecycles.

Status

Initial API Summary/Quick API Proposal

-

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
+  }
+}
+          
+

Key Scenarios

-

---

+

Concerns

Dissenting Opinion

-

Related Specs

Open Questions

From 49b4c92a731e45c46a6df421ad3fa25c53a0eb32 Mon Sep 17 00:00:00 2001 From: "Caleb D. Williams" Date: Tue, 23 Aug 2022 07:08:53 -0500 Subject: [PATCH 2/2] chore(face): clarify WebKit position and remove dissenting opinion section --- reports/2022.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/reports/2022.html b/reports/2022.html index ed4c45f..6d22543 100644 --- a/reports/2022.html +++ b/reports/2022.html @@ -228,7 +228,7 @@

Status

Firefox (shipped in version 90)
  • - Safari has merged a PR implementing the first part of the ElementInternals spec which includes the form-associated custom elements behavior; however, the initial PR doesn't include the actual form-association APIs. The polyfill does check for the presence of the form-associated APIs separately from ElementInternals, so this is not likely to cause any issues if it is released in part. + WebKit is in favor and has the feature in active development and has merged a PR implementing the first part of ElementInternals which includes the form-associated custom elements behavior; however, the initial PR doesn't include the actual form-association APIs.
    • @@ -312,9 +312,6 @@

    Concerns

  • The form-associated APIs currently have no way for a developer to behave as a custom submit button. Though there are several workarounds.
    • -
    -

    Dissenting Opinion

    -

    Related Specs