feat: add support for ElementInternals in synthetic shadow

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: ProxyHandler<ElementInternals> = {
+                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/helpers/setup.js

@@ -65,6 +65,7 @@ hijackGlobal('afterEach', (afterEach) => {
         // Ensure the DOM is in a clean state
         document.body.replaceChildren();
         document.head.replaceChildren();
+        window.__lwcResetGlobalStylesheets();
     });
 });
 

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,139 @@ 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();
-    });
-});
+const readOnlyProperties = [
+    'shadowRoot',
+    'states',
+    'form',
+    'willValidate',
+    'validity',
+    'validationMessage',
+    'labels',
+];
+
+const formAssociatedFalsyTest = (tagName, ctor) => {
+    const form = document.createElement('form');
+    document.body.appendChild(form);
+
+    const elm = createElement(`x-${tagName}`, { is: ctor });
+    form.appendChild(elm);
+
+    const { internals } = 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);
+};
+
+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 when formAssociated is false', () => {
+            formAssociatedFalsyTest('x-form-associated-false', FormAssociatedFalse);
+        });
+
+        it('should throw an error when accessing form related properties when formAssociated is undefined', () => {
+            formAssociatedFalsyTest('x-not-form-associated', NotFormAssociated);
+        });
+
+        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);
+        });
+
+        for (const prop of readOnlyProperties) {
+            it(`should throw error when trying to set readonly ${prop} on form associated component`, () => {
+                const elm = createElement('x-form-associated', { is: FormAssociated });
+                document.body.appendChild(elm);
+                const { internals } = elm;
+                expect(() => (internals[prop] = 'test')).toThrow();
+            });
+        }
+    }
+);
 
-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.css

@@ -0,0 +1,3 @@
+:host(:state(--checked)) {
+    color: rgb(255, 0, 0);
+}

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

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

@@ -9,40 +9,48 @@ beforeEach(() => {
     document.body.appendChild(elm);
 });
 
-describe.runIf(
-    ENABLE_ELEMENT_INTERNALS_AND_FACE &&
-        process.env.NATIVE_SHADOW &&
-        typeof ElementInternals !== 'undefined'
-)('ElementInternals', () => {
-    it('should be associated to the correct element', () => {
-        // Ensure external and internal views of shadowRoot are the same
-        expect(elm.internals.shadowRoot).toBe(elm.template);
-        expect(elm.internals.shadowRoot).toBe(elm.shadowRoot);
-    });
-
-    describe('accessibility', () => {
-        it('should be able to set ARIAMixin properties on ElementInternals', () => {
-            elm.setAllAriaProps('foo');
-            // Verify ElementInternals proxy setter and getter
-            for (const ariaProp of ariaProperties) {
-                expect(elm.internals[ariaProp]).toEqual('foo');
-            }
+describe.runIf(ENABLE_ELEMENT_INTERNALS_AND_FACE && typeof ElementInternals !== 'undefined')(
+    'ElementInternals',
+    () => {
+        it('should be associated to the correct element', () => {
+            // Ensure external and internal views of shadowRoot are the same
+            expect(elm.internals.shadowRoot).toBe(elm.template);
+            expect(elm.internals.shadowRoot).toBe(elm.shadowRoot);
         });
 
-        it('should not reflect to aria-* attributes', () => {
-            elm.setAllAriaProps('foo');
-            for (const attr of ariaAttributes) {
-                expect(elm.getAttribute(attr)).not.toEqual('foo');
-            }
+        it('should be able to toggle states', () => {
+            elm.toggleChecked();
+            expect(elm.internals.states.has('--checked')).toBe(true);
+            expect(getComputedStyle(elm).color).toBe('rgb(255, 0, 0)');
+            elm.toggleChecked();
+            expect(elm.internals.states.has('--checked')).toBe(false);
+            expect(getComputedStyle(elm).color).toBe('rgb(0, 0, 0)');
         });
 
-        it('aria-* attributes do not reflect to internals', () => {
-            for (const attr of ariaAttributes) {
-                elm.setAttribute(attr, 'bar');
-            }
-            for (const prop of ariaProperties) {
-                expect(elm.internals[prop]).toBeFalsy();
-            }
+        describe('accessibility', () => {
+            it('should be able to set ARIAMixin properties on ElementInternals', () => {
+                elm.setAllAriaProps('foo');
+                // Verify ElementInternals proxy setter and getter
+                for (const ariaProp of ariaProperties) {
+                    expect(elm.internals[ariaProp]).toEqual('foo');
+                }
+            });
+
+            it('should not reflect to aria-* attributes', () => {
+                elm.setAllAriaProps('foo');
+                for (const attr of ariaAttributes) {
+                    expect(elm.getAttribute(attr)).not.toEqual('foo');
+                }
+            });
+
+            it('aria-* attributes do not reflect to internals', () => {
+                for (const attr of ariaAttributes) {
+                    elm.setAttribute(attr, 'bar');
+                }
+                for (const prop of ariaProperties) {
+                    expect(elm.internals[prop]).toBeFalsy();
+                }
+            });
         });
-    });
-});
+    }
+);