feat: add shadowRoot to internals

Author: calebdwilliams

Diff for: src/element-internals.ts

@@ -6,7 +6,8 @@ import {
   shadowHostsMap,
   formElementsMap,
   refValueMap,
-  hiddenInputMap
+  hiddenInputMap,
+  shadowRootMap
 } from './maps';
 import { initAom } from './aom';
 import { getHostRoot, initRef, initLabels, initForm, findParentForm, createHiddenInput, removeHiddenInputs } from './utils';
@@ -167,6 +168,15 @@ export class ElementInternals implements IElementInternals {
     ref.setAttribute('aria-invalid', `${!valid}`);
   }
 
+  get shadowRoot(): ShadowRoot | null {
+    const ref = refMap.get(this);
+    const shadowRoot = shadowRootMap.get(ref);
+    if (shadowRoot) {
+      return shadowRootMap.get(ref);
+    }
+    return null;
+  }
+
   /** The element's validation message set during a call to ElementInternals.setValidity */
   get validationMessage(): string {
     return validationMessageMap.get(this);
@@ -201,6 +211,7 @@ if (!window.ElementInternals) {
   function attachShadowObserver(...args) {
     const shadowRoot = attachShadow.apply(this, args);
     const observer = new MutationObserver(observerCallback);
+    shadowRootMap.set(this, shadowRoot);
     observer.observe(shadowRoot, observerConfig);
     shadowHostsMap.set(this, observer);
     return shadowRoot;
@@ -226,37 +237,4 @@ if (!window.ElementInternals) {
 
   const documentObserver = new MutationObserver(observerCallback);
   documentObserver.observe(document.documentElement, observerConfig);
-
-  const FormDataOriginal = window.FormData;
-
-  class FormData {
-    constructor(form?: HTMLFormElement) {
-      const data = new FormDataOriginal(form);
-      if (form && formElementsMap.has(form)) {
-        const refs = formElementsMap.get(form);
-        refs.forEach(ref => {
-          if (ref.getAttribute('name')) {
-            const value = refValueMap.get(ref);
-            if (typeof value === 'string') {
-              data.set(ref.getAttribute('name'), value);
-            } else if (value != null) {
-              const keysAdded = [];
-              value.forEach((formDataValue, formDataKey) => {
-                if (keysAdded.includes(formDataKey)) {
-                  data.append(formDataKey, formDataValue);
-                } else {
-                  data.set(formDataKey, formDataValue);
-                  keysAdded.push(formDataKey);
-                }
-              })
-            }
-          }
-        });
-      }
-      return data;
-    }
-  }
-
-  // @ts-ignore
-  window.FormData = FormData;
 }

Diff for: src/maps.ts

@@ -34,3 +34,6 @@ export const refValueMap = new WeakMap<ICustomElement, any>();
 
 /** Elements that need to be upgraded once added to the DOM */
 export const upgradeMap = new WeakMap<Element, IElementInternals>();
+
+/** Save references to shadow roots for inclusion in internals instance */
+export const shadowRootMap = new WeakMap<ICustomElement, ShadowRoot>();

Diff for: static/scripts/address.js

@@ -0,0 +1,57 @@
+const addressSheet = new CSSStyleSheet();
+addressSheet.replace('input { display: block; } fieldset { display: flex; flex-flow: column; gap: 16px; border: 1px solid #ccc}');
+
+class Address extends HTMLElement {
+  static get formAssociated() {
+    return true;
+  }
+
+  internals = this.attachInternals();
+
+  connectedCallback() {
+    const root = this.attachShadow({ mode: 'open' });
+    root.adoptedStyleSheets = [addressSheet];
+    const form = document.createElement('form');
+    form.innerHTML = `
+    <fieldset>
+      <legend>Address</legend>
+      <input name="line1" value="1600 Pennsylvania Ave"/>
+      <input name="line2"/>
+      <input name="city" value="Washington"/>
+      <input name="state" value="District of Columbia"/>
+      <button type="submit">Test</button>
+      <button type="button">Other</button>
+    </fieldset>`;
+    root.append(form);
+
+    // this.log();
+    form.addEventListener('submit', this.log.bind(this));
+
+    root.querySelector('[type="button"]')
+      .addEventListener('click', this._other.bind(this));
+  }
+
+  _other() {
+    this.shadowRoot.querySelector('input').remove();
+  }
+
+  log(event) {
+    if (event) {
+      event.preventDefault();
+    }
+    const internalFormData = new FormData(
+      this.shadowRoot.querySelector('form')
+    );
+    this.internals.setFormValue(
+      internalFormData
+    );
+
+    const allData = new FormData(this.internals.form);
+
+    for (let [key, value] of allData.entries()) {
+      console.log({ [key]: value });
+    }
+  }
+}
+
+customElements.define('x-address', Address);

Diff for: test/ElementInternals.test.js

@@ -336,6 +336,39 @@ describe('The ElementInternals polyfill', () => {
       const output = new FormData(form);
       expect(Array.from(output.keys()).length).to.equal(1);
       expect(output.get('formdata')).to.equal('works');
-    })
+    });
+
+    it('saves a reference to all shadow roots', () => {
+      expect(internals.shadowRoot).to.equal(el.shadowRoot);
+    });
+  });
+
+  describe('closed shadow root element', () => {
+    let shadowRoot;
+    let el;
+    let internals;
+
+    class ClosedRoot extends HTMLElement {
+      constructor() {
+        super();
+        shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.internals = this.attachInternals();
+      }
+    }
+
+    customElements.define('closed-root', ClosedRoot);
+
+    beforeEach(async () => {
+      el = await fixture(html`<closed-root></closed-root>`);
+      internals = el.internals;
+    });
+
+    afterEach(async () => {
+      await fixtureCleanup(el);
+    });
+
+    it('maintains a reference to closed shadow roots', () => {
+      expect(internals.shadowRoot).to.equal(shadowRoot);
+    });
   });
 });