Updated: "Fix element not calling attach internals"

package.json

@@ -16,7 +16,7 @@
     "test:watch": "npm run test -- --watch",
     "test:coverage": "npm run test -- --coverage",
     "test:jsdom": "node ./jsdom-tests/jsdom.test.js",
-    "pretest:jsdom": "rollup -i dist/index.js -o jsdom-tests/polyfill.js -f iife",
+    "pretest:jsdom": "rollup -i dist/index.js -o jsdom-tests/polyfill.js -f iife -n polyfill --context window",
     "start": "rollup -c --watch --environment BUILD:dev",
     "build": "tsc",
     "prerelease": "npm run build",
@@ -48,9 +48,10 @@
   "homepage": "https://github.com/calebdwilliams/element-internals-polyfill#readme",
   "devDependencies": {
     "@changesets/cli": "^2.27.8",
-    "@lit-labs/testing": "^0.2.1",
+    "@lit-labs/testing": "^0.2.7",
     "@open-wc/testing": "^3.1.7",
     "@open-wc/testing-helpers": "^1.7.1",
+    "@playwright/test": "^1.45.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-typescript": "^6.0.0",
     "@types/mocha": "^10.0.1",
@@ -69,7 +70,7 @@
     "karma-rollup-preprocessor": "^7.0.5",
     "karma-safari-launcher": "^1.0.0",
     "karma-safarinative-launcher": "^1.1.0",
-    "lit": "^2.7.2",
+    "lit": "^3.3.0",
     "lit-html": "^1.2.1",
     "rollup": "^2.46.0",
     "rollup-plugin-cleanup": "^3.2.1",
@@ -80,6 +81,5 @@
     "standard-version": "^9.0.0",
     "tslib": "^2.1.0",
     "typescript": "^5.5.4"
-  },
-  "dependencies": {}
+  }
 }

src/element-internals.ts

@@ -14,21 +14,23 @@ import {
   setAttribute,
   createHiddenInput,
   findParentForm,
-  initRef,
   mutationObserverExists,
   removeHiddenInputs,
   setDisabled,
   throwIfNotFormAssociated,
   upgradeInternals,
 } from "./utils.js";
+import {
+  initRef,
+} from "./mutation-observers.js";
 import { initAom } from "./aom.js";
 import { ValidityState, reconcileValidity, setValid } from "./ValidityState.js";
 import {
   deferUpgrade,
   observerCallback,
   observerConfig,
 } from "./mutation-observers.js";
-import { ICustomElement, LabelsList } from "./types.js";
+import { LabelsList } from "./types.js";
 import { CustomStateSet } from "./CustomStateSet.js";
 import { patchFormPrototype } from "./patch-form-prototype.js";
 
@@ -403,6 +405,11 @@ export function forceCustomStateSetPolyfill(
  * polyfill as well.
  */
 export function forceElementInternalsPolyfill(forceCustomStateSet = true) {
+  /**
+   * This is a flag to prevent a DOMException from being thrown when
+   * attachInternals is called in upgradeInternals.
+   */
+  let attachedFlag = false;
   if (hasElementInternalsPolyfillBeenApplied) {
     return;
   }
@@ -436,7 +443,7 @@ export function forceElementInternalsPolyfill(forceCustomStateSet = true) {
             connectedCallback.apply(this);
           }
           // always upgradeInternals in connectedCallback instead of constructor
-          upgradeInternals(this);
+          attachedFlag = upgradeInternals(this);
         };
       }
 
@@ -458,7 +465,7 @@ export function forceElementInternalsPolyfill(forceCustomStateSet = true) {
           `Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.`
         );
       }
-      if (internalsMap.has(this)) {
+      if (internalsMap.has(this) && !attachedFlag) {
         throw new DOMException(
           `DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.`
         );

src/mutation-observers.ts

@@ -3,6 +3,23 @@ import { aom } from './aom.js';
 import { setAttribute, removeHiddenInputs, initForm, initLabels, upgradeInternals, setDisabled, mutationObserverExists } from './utils.js';
 import { ICustomElement } from './types.js';
 
+
+/**
+ * Initialize a ref by setting up an attribute observe on it
+ * looking for changes to disabled
+ * @param {HTMLElement} ref - The element to watch
+ * @param {ElementInternals} internals - The element internals instance for the ref
+ * @return {void}
+ */
+export const initRef = (
+  ref: HTMLElement,
+  internals: ElementInternals
+): void => {
+  hiddenInputMap.set(internals, []);
+  disabledOrNameObserver.observe?.(ref, disabledOrNameObserverConfig);
+};
+
+
 function initNode(node: ICustomElement): void {
   const internals = internalsMap.get(node);
   const { form } = internals;

src/utils.ts

@@ -92,21 +92,6 @@ export const createHiddenInput = (
   return input;
 };
 
-/**
- * Initialize a ref by setting up an attribute observe on it
- * looking for changes to disabled
- * @param {HTMLElement} ref - The element to watch
- * @param {ElementInternals} internals - The element internals instance for the ref
- * @return {void}
- */
-export const initRef = (
-  ref: HTMLElement,
-  internals: ElementInternals
-): void => {
-  hiddenInputMap.set(internals, []);
-  disabledOrNameObserver.observe?.(ref, disabledOrNameObserverConfig);
-};
-
 /**
  * Set up labels for the ref
  * @param {HTMLElement} ref - The ref to add labels to
@@ -360,13 +345,21 @@ export const overrideFormMethod = (
  * either constructed or appended from a DocumentFragment
  * @param ref {HTMLElement} - The custom element to upgrade
  */
-export const upgradeInternals = (ref: FormAssociatedCustomElement) => {
+export const upgradeInternals = (ref: FormAssociatedCustomElement): boolean => {
+  let attached = false;
   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) {
+      ref.attachInternals();
+      internals = internalsMap.get(ref);
+      attached = true;
+    }
     const { labels, form } = internals;
     initLabels(ref, labels);
     initForm(ref, form, internals);
   }
+  return attached;
 };
 
 /**

test/CustomStateSet.test.ts

@@ -91,9 +91,9 @@ describe('CustomStateSet polyfill', () => {
 
     if (window.CustomStateSet.isPolyfilled) {
       await aTimeout(100);
-      expect(el.matches('[state--foo]')).to.be.true;
+      expect(el.internals.states.has('--foo')).to.be.true;
     } else {
-      expect(el.matches(`:--foo`)).to.be.true;
+      expect(el.internals.states.has('--foo')).to.be.true;
     }
   });
 
@@ -107,7 +107,7 @@ describe('CustomStateSet polyfill', () => {
       await aTimeout(100);
       expect(el.matches('[state--foo]')).to.be.false;
     } else {
-      expect(el.matches(`:--foo`)).to.be.false;
+      expect(el.internals.states.has('--foo')).to.be.false;
     }
   });
 });

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');