fix: ensure polyfill generates attributes

Author: calebdwilliams

Diff for: src/element-internals.ts

@@ -8,6 +8,7 @@ import {
   validationAnchorMap,
   validityMap,
   validationMessageMap,
+  validityUpgradeMap,
 } from './maps';
 import {
   createHiddenInput,
@@ -216,9 +217,16 @@ export class ElementInternals implements IElementInternals {
       throw new DOMException(`Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.`);
     }
     validationMessageMap.set(this, valid ? '' : validationMessage);
-    ref.toggleAttribute('internals-invalid', !valid);
-    ref.toggleAttribute('internals-valid', valid);
-    ref.setAttribute('aria-invalid', `${!valid}`);
+
+    // check to make sure the host element is connected before adding attributes
+    // because safari doesnt allow elements to have attributes added in the constructor
+    if (ref.isConnected) {
+      ref.toggleAttribute('internals-invalid', !valid);
+      ref.toggleAttribute('internals-valid', valid);
+      ref.setAttribute('aria-invalid', `${!valid}`);
+    } else {
+      validityUpgradeMap.set(ref, this);
+    }
   }
 
   get shadowRoot(): ShadowRoot | null {
@@ -262,7 +270,7 @@ export class ElementInternals implements IElementInternals {
 declare global {
   interface CustomElementConstructor {
     formAssociated?: boolean;
-  } 
+  }
 
   interface Window {
     ElementInternals: typeof ElementInternals

Diff for: src/maps.ts

@@ -46,3 +46,6 @@ export const documentFragmentMap = new WeakMap<DocumentFragment, MutationObserve
 
 /** Whether connectedCallback has already been called. */
 export const connectedCallbackMap = new WeakMap<ICustomElement, boolean>();
+
+/** Save a reference to validity state for elements that need to upgrade after being connected */
+export const validityUpgradeMap = new WeakMap<ICustomElement, IElementInternals>();

Diff for: src/mutation-observers.ts

@@ -1,4 +1,4 @@
-import { internalsMap, shadowHostsMap, upgradeMap, hiddenInputMap, documentFragmentMap, formElementsMap } from './maps.js';
+import { internalsMap, shadowHostsMap, upgradeMap, hiddenInputMap, documentFragmentMap, formElementsMap, validityUpgradeMap } from './maps.js';
 import { aom } from './aom.js';
 import { removeHiddenInputs, initForm, initLabels, upgradeInternals, setDisabled } from './utils.js';
 import { ICustomElement } from './types.js';
@@ -67,6 +67,7 @@ export function observerCallback(mutationList: MutationRecord[]) {
         initNode(node);
       }
 
+
       /** Upgrade the accessibility information on any previously connected */
       if (upgradeMap.has(node)) {
         const internals = upgradeMap.get(node);
@@ -79,6 +80,15 @@ export function observerCallback(mutationList: MutationRecord[]) {
         upgradeMap.delete(node);
       }
 
+      /** Upgrade the validity state when the element is connected */
+      if (validityUpgradeMap.has(node)) {
+        const internals = validityUpgradeMap.get(node);
+        node.setAttribute('internals-valid', internals.validity.valid.toString());
+        node.setAttribute('internals-invalid', (!internals.validity.valid).toString());
+        node.setAttribute('aria-invalid', (!internals.validity.valid).toString());
+        validityUpgradeMap.delete(node);
+      }
+
       /** If the node that's added is a form, check the validity */
       if (node.localName === 'form') {
         const formElements = formElementsMap.get(node as unknown as HTMLFormElement);

Diff for: test/polyfilledBrowsers.test.js

@@ -68,7 +68,15 @@ describe('ElementInternals polyfill behavior', () => {
       }
     }
 
+    class ValidateInConstructor extends FormAssociated {
+      constructor() {
+        super();
+        this.internals.setValidity({ valueMissing: true }, 'Test');
+      }
+    }
+
     customElements.define('form-associated', FormAssociated);
+    customElements.define('validate-in-constructor', ValidateInConstructor);
 
     beforeEach(async () => {
       form = await fixture(html`<form>
@@ -106,6 +114,19 @@ describe('ElementInternals polyfill behavior', () => {
         expect(el.getAttribute('role')).to.equal('button');
       }
     });
+
+    it('will not throw and will upgrade if constructed using document.createElement', async () => {
+      let el;
+      expect(() => {
+        el = document.createElement('validate-in-constructor');
+      }).not.to.throw();
+      document.body.append(el);
+      await aTimeout(0);
+      if (ElementInternals.isPolyfilled) {
+        expect(el.getAttribute('internals-valid')).to.equal('false');
+        expect(el.getAttribute('internals-invalid')).to.equal('true');
+      }
+    });
   });
 
   describe('CustomStateSet', () => {