feat: add support for ElementInternals in synthetic shadow

Author: roxanne-baker

packages/@lwc/engine-core/src/framework/base-lightning-element.ts

@@ -506,11 +506,26 @@ function warnIfInvokedDuringConstruction(vm: VM, methodOrPropName: string) {
             );
         }
 
+        const internals = attachInternals(elm);
         if (vm.shadowMode === ShadowMode.Synthetic) {
-            throw new Error('attachInternals API is not supported in synthetic shadow.');
+            const handler = {
+                get(target: ElementInternals, prop: keyof ElementInternals) {
+                    if (prop === 'shadowRoot') {
+                        return vm.shadowRoot;
+                    }
+                    const value = Reflect.get(target, prop);
+                    if (typeof value === 'function') {
+                        return value.bind(target);
+                    }
+                    return value;
+                },
+                set(target: ElementInternals, prop: keyof ElementInternals, value: any) {
+                    return Reflect.set(target, prop, value);
+                },
+            };
+            return new Proxy(internals, handler);
         }
-
-        return attachInternals(elm);
+        return internals;
     },
 
     get isConnected(): boolean {

packages/@lwc/engine-core/src/framework/vm.ts

@@ -972,14 +972,6 @@ export function forceRehydration(vm: VM) {
 }
 
 export function runFormAssociatedCustomElementCallback(vm: VM, faceCb: () => void, args?: any[]) {
-    const { renderMode, shadowMode } = vm;
-
-    if (shadowMode === ShadowMode.Synthetic && renderMode !== RenderMode.Light) {
-        throw new Error(
-            'Form associated lifecycle methods are not available in synthetic shadow. Please use native shadow or light DOM.'
-        );
-    }
-
     invokeComponentCallback(vm, faceCb, args);
 }
 

packages/@lwc/integration-not-karma/test/component/LightningElement.attachInternals/api/ai/syntheticShadowDom/syntheticShadowDom.html

@@ -0,0 +1 @@
+<template></template>

packages/@lwc/integration-not-karma/test/component/LightningElement.attachInternals/api/ai/syntheticShadowDom/syntheticShadowDom.js

@@ -0,0 +1,19 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    internals;
+
+    connectedCallback() {
+        this.internals = this.attachInternals();
+    }
+
+    @api
+    callAttachInternals() {
+        this.internals = this.attachInternals();
+    }
+
+    @api
+    hasElementInternalsBeenSet() {
+        return Boolean(this.internals);
+    }
+}

packages/@lwc/integration-not-karma/test/component/LightningElement.attachInternals/api/index.spec.js

@@ -1,6 +1,7 @@
 import { createElement } from 'lwc';
 
 import ShadowDomCmp from 'ai/shadowDom';
+import SyntheticShadowDomCmp from 'ai/syntheticShadowDom';
 import LightDomCmp from 'ai/lightDom';
 import BasicCmp from 'ai/basic';
 import {
@@ -67,13 +68,7 @@ describe.runIf(ENABLE_ELEMENT_INTERNALS_AND_FACE)('ElementInternals', () => {
         });
 
         describe.skipIf(process.env.NATIVE_SHADOW)('synthetic shadow', () => {
-            it('should throw error when used inside a component', () => {
-                const elm = createElement('synthetic-shadow', { is: ShadowDomCmp });
-                testConnectedCallbackError(
-                    elm,
-                    'attachInternals API is not supported in synthetic shadow.'
-                );
-            });
+            attachInternalsSanityTest('synthetic-shadow', SyntheticShadowDomCmp);
         });
 
         describe('light DOM', () => {

packages/@lwc/integration-not-karma/test/component/LightningElement.attachInternals/elementInternals/formAssociated/index.spec.js

@@ -6,43 +6,117 @@ import FormAssociatedFalse from 'x/formAssociatedFalse';
 import NotFormAssociatedNoAttachInternals from 'x/notFormAssociatedNoAttachInternals';
 import FormAssociatedNoAttachInternals from 'x/formAssociatedNoAttachInternals';
 import FormAssociatedFalseNoAttachInternals from 'x/formAssociatedFalseNoAttachInternals';
-import {
-    ENABLE_ELEMENT_INTERNALS_AND_FACE,
-    IS_SYNTHETIC_SHADOW_LOADED,
-} from '../../../../../helpers/constants.js';
-
-describe.runIf(
-    ENABLE_ELEMENT_INTERNALS_AND_FACE &&
-        typeof ElementInternals !== 'undefined' &&
-        !IS_SYNTHETIC_SHADOW_LOADED
-)('should throw an error when duplicate tag name used', () => {
-    it('with different formAssociated value', () => {
-        // Register tag with formAssociated = true
-        createElement('x-form-associated', { is: FormAssociated });
-        // Try to register again with formAssociated = false
-        expect(() => createElement('x-form-associated', { is: FormAssociatedFalse })).toThrowError(
-            /<x-form-associated> was already registered with formAssociated=true. It cannot be re-registered with formAssociated=false. Please rename your component to have a different name than <x-form-associated>/
-        );
-    });
+import { ENABLE_ELEMENT_INTERNALS_AND_FACE } from '../../../../../helpers/constants.js';
 
-    it('should not throw when duplicate tag name used with the same formAssociated value', () => {
-        // formAssociated = true
-        createElement('x-form-associated', { is: FormAssociated });
-        expect(() => createElement('x-form-associated', { is: FormAssociated })).not.toThrow();
-        // formAssociated = false
-        createElement('x-form-associated-false', { is: FormAssociatedFalse });
-        expect(() =>
-            createElement('x-form-associated-false', { is: FormAssociatedFalse })
-        ).not.toThrow();
-        // formAssociated = undefined
-        createElement('x-not-form-associated', { is: NotFormAssociated });
-        expect(() =>
-            createElement('x-not-form-associated', { is: NotFormAssociated })
-        ).not.toThrow();
-    });
-});
+describe.runIf(ENABLE_ELEMENT_INTERNALS_AND_FACE && typeof ElementInternals !== 'undefined')(
+    'should throw an error when duplicate tag name used',
+    () => {
+        it('with different formAssociated value', () => {
+            // Register tag with formAssociated = true
+            createElement('x-form-associated', { is: FormAssociated });
+            // Try to register again with formAssociated = false
+            expect(() =>
+                createElement('x-form-associated', { is: FormAssociatedFalse })
+            ).toThrowError(
+                /<x-form-associated> was already registered with formAssociated=true. It cannot be re-registered with formAssociated=false. Please rename your component to have a different name than <x-form-associated>/
+            );
+        });
+
+        it('should not throw when duplicate tag name used with the same formAssociated value', () => {
+            // formAssociated = true
+            createElement('x-form-associated', { is: FormAssociated });
+            expect(() => createElement('x-form-associated', { is: FormAssociated })).not.toThrow();
+            // formAssociated = false
+            createElement('x-form-associated-false', { is: FormAssociatedFalse });
+            expect(() =>
+                createElement('x-form-associated-false', { is: FormAssociatedFalse })
+            ).not.toThrow();
+            // formAssociated = undefined
+            createElement('x-not-form-associated', { is: NotFormAssociated });
+            expect(() =>
+                createElement('x-not-form-associated', { is: NotFormAssociated })
+            ).not.toThrow();
+        });
+
+        it('should throw an error when accessing form related properties on a non-form associated component', () => {
+            const form = document.createElement('form');
+            document.body.appendChild(form);
+
+            const testElements = {
+                'x-form-associated-false': FormAssociatedFalse,
+                'x-not-form-associated': NotFormAssociated,
+            };
+            let elm;
+            Object.entries(testElements).forEach(([tagName, ctor]) => {
+                elm = createElement(`x-${tagName}`, { is: ctor });
+                const { internals } = elm;
+                form.appendChild(elm);
+                expect(() => internals.form).toThrow();
+                expect(() => internals.setFormValue('2019-03-15')).toThrow();
+                expect(() => internals.willValidate).toThrow();
+                expect(() => internals.validity).toThrow();
+                expect(() => internals.checkValidity()).toThrow();
+                expect(() => internals.reportValidity()).toThrow();
+                expect(() => internals.setValidity('')).toThrow();
+                expect(() => internals.validationMessage).toThrow();
+                expect(() => internals.labels).toThrow();
+            });
+            document.body.removeChild(form);
+        });
+
+        it('should be able to use internals to validate form associated component', () => {
+            const elm = createElement('x-form-associated', { is: FormAssociated });
+            const { internals } = elm;
+            expect(internals.willValidate).toBe(true);
+            expect(internals.validity.valid).toBe(true);
+            expect(internals.checkValidity()).toBe(true);
+            expect(internals.reportValidity()).toBe(true);
+            expect(internals.validationMessage).toBe('');
+
+            internals.setValidity({ rangeUnderflow: true }, 'pick future date');
+
+            expect(internals.validity.valid).toBe(false);
+            expect(internals.checkValidity()).toBe(false);
+            expect(internals.reportValidity()).toBe(false);
+            expect(internals.validationMessage).toBe('pick future date');
+        });
+
+        it('should be able to use setFormValue on a form associated component', () => {
+            const form = document.createElement('form');
+            document.body.appendChild(form);
+
+            const elm = createElement('x-form-associated', { is: FormAssociated });
+            const { internals } = elm;
+            form.appendChild(elm);
+
+            expect(internals.form).toBe(form);
+
+            elm.setAttribute('name', 'date');
+            const inputElm = elm.shadowRoot
+                .querySelector('x-input')
+                .shadowRoot.querySelector('input');
+            internals.setFormValue('2019-03-15', '3/15/2019', inputElm);
+            const formData = new FormData(form);
+            expect(formData.get('date')).toBe('2019-03-15');
+        });
+
+        it('should be able to associate labels to a form associated component', () => {
+            const elm = createElement('x-form-associated', { is: FormAssociated });
+            document.body.appendChild(elm);
+            const { internals } = elm;
+
+            expect(internals.labels.length).toBe(0);
+            elm.id = 'test-id';
+            const label = document.createElement('label');
+            label.htmlFor = elm.id;
+            document.body.appendChild(label);
+            expect(internals.labels.length).toBe(1);
+            expect(internals.labels[0]).toBe(label);
+        });
+    }
+);
 
-it.runIf(typeof ElementInternals !== 'undefined' && !IS_SYNTHETIC_SHADOW_LOADED)(
+it.runIf(typeof ElementInternals === 'undefined')(
     'disallows form association on older API versions',
     () => {
         const isFormAssociated = (elm) => {

packages/@lwc/integration-not-karma/test/component/LightningElement.attachInternals/elementInternals/formAssociated/x/formAssociated/formAssociated.html

@@ -0,0 +1,3 @@
+<template>
+    <x-input></x-input>
+</template>

packages/@lwc/integration-not-karma/test/component/LightningElement.attachInternals/elementInternals/formAssociated/x/input/input.html

@@ -0,0 +1,3 @@
+<template>
+    <input />
+</template>

packages/@lwc/integration-not-karma/test/component/LightningElement.attachInternals/elementInternals/formAssociated/x/input/input.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/@lwc/integration-not-karma/test/component/LightningElement.attachInternals/elementInternals/sanity/ei/component/component.js

@@ -19,4 +19,13 @@ export default class extends LightningElement {
             this.internals[prop] = value;
         }
     }
+
+    @api
+    toggleChecked() {
+        if (!this.internals.states.has('--checked')) {
+            this.internals.states.add('--checked');
+        } else {
+            this.internals.states.delete('--checked');
+        }
+    }
 }