Fix element not calling attach internals

package.json

@@ -46,6 +46,7 @@
   "devDependencies": {
     "@lit-labs/testing": "^0.2.1",
     "@open-wc/testing": "^3.1.7",
+    "@playwright/test": "^1.45.0-alpha-2024-05-24",
     "@open-wc/testing-helpers": "^1.7.1",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-typescript": "^6.0.0",

src/element-internals.ts

@@ -393,9 +393,6 @@ export function forceElementInternalsPolyfill(forceCustomStateSet = true) {
       } else if (this.tagName.indexOf('-') === -1) {
         throw new Error(`Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.`);
       }
-      if (internalsMap.has(this)) {
-        throw new DOMException(`DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.`);
-      }
       return new ElementInternals(this) as IElementInternals;
     }
   }

src/utils.ts

@@ -119,7 +119,7 @@ export const formInputCallback = (event: Event) => {
  * @param {Event} - The form change event
  * @return {void}
  */
- export const formChangeCallback = (event: Event) => {
+export const formChangeCallback = (event: Event) => {
   setFormValidity(findParentForm(event.target));
 };
 
@@ -263,7 +263,7 @@ export const throwIfNotFormAssociated = (ref: ICustomElement, message: string, E
  * @param method {'checkValidity'|'reportValidity'} - The original method
  * @returns {boolean} The form's validity state
  */
-export const overrideFormMethod = (form: HTMLFormElement, returnValue: boolean, method: 'checkValidity'|'reportValidity'): boolean => {
+export const overrideFormMethod = (form: HTMLFormElement, returnValue: boolean, method: 'checkValidity' | 'reportValidity'): boolean => {
   const elements = formElementsMap.get(form);
 
   /** Some forms won't contain form associated custom elements */
@@ -287,10 +287,17 @@ export const overrideFormMethod = (form: HTMLFormElement, returnValue: boolean,
  */
 export const upgradeInternals = (ref: ICustomElement) => {
   if (ref.constructor['formAssociated']) {
-    const internals = internalsMap.get(ref);
+    let internals = internalsMap.get(ref);
+    // we might have cases where the internals are not set
+    if (internals === undefined) {
+      console.warn('ElementInternals missing from the element', ref);
+      ref.attachInternals();
+      internals = internalsMap.get(ref);
+    }
     const { labels, form } = internals;
     initLabels(ref, labels);
     initForm(ref, form, internals);
+
   }
 };
 

test/FormElements.test.ts

@@ -1,6 +1,5 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import '../dist/index.js';
-
 class TestInput extends HTMLElement {
   static formAssociated = true;
   internals = this.attachInternals();
@@ -11,7 +10,12 @@ customElements.define('test-input', TestInput);
 class TestDummy extends HTMLElement {
 }
 
+
 customElements.define('test-dummy', TestDummy);
+class TestFormAssociatedNoAttachInternals extends HTMLElement {
+  static formAssociated = true;
+}
+customElements.define('test-no-attach-internals', TestFormAssociatedNoAttachInternals);
 
 async function createForm(): Promise<HTMLFormElement> {
   return await fixture<HTMLFormElement>(html`
@@ -22,18 +26,20 @@ async function createForm(): Promise<HTMLFormElement> {
       <test-input name="second" id="ti2"></test-input>
       <test-input name="third" id="ti3"></test-input>
       <button type="submit">Submit</button>
+      <test-no-attach-internals></test-no-attach-internals>
     </form>`);
 }
 
 it('must contains the custom elements associated to the current form, in the correct order', async () => {
   const form = await createForm();
-  expect(form.elements).to.have.length(5);
+  expect(form.elements).to.have.length(6);
 
   expect(form.elements[0]).to.be.an.instanceof(HTMLInputElement);
   expect(form.elements[1]).to.be.an.instanceof(TestInput);
   expect(form.elements[2]).to.be.an.instanceof(TestInput);
   expect(form.elements[3]).to.be.an.instanceof(TestInput);
   expect(form.elements[4]).to.be.an.instanceof(HTMLButtonElement);
+  expect(form.elements[5]).to.be.an.instanceof(TestFormAssociatedNoAttachInternals);
 
   expect(form.elements[0].id).to.equal('foo');
   expect(form.elements[1].id).to.equal('ti1');