test(integration-karma): add a new FORCED_MIXED_SHADOW_MODE

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

@@ -316,6 +316,10 @@ export function createVM<HostNode, HostElement>(
         vm.toString = (): string => {
             return `[object:vm ${def.name} (${vm.idx})]`;
         };
+        // Forced mixed shadow mode for testing
+        if (process.env.FORCED_MIXED_SHADOW_MODE) {
+            vm.shadowMode = ShadowMode.Native;
+        }
     }
 
     // Create component instance associated to the vm and the element.

packages/integration-karma/README.md

@@ -24,6 +24,7 @@ This set of environment variables applies to the `start` and `test` commands:
 
 -   **`COMPAT=1`:** Compile and deliver tests in COMPAT mode.
 -   **`DISABLE_SYNTHETIC=1`:** Run without any synthetic shadow polyfill patches.
+-   **`FORCED_MIXED_SHADOW_MODE=1`:** Force tests to run in native shadow mode with synthetic shadow polyfill patches.
 -   **`COVERAGE=1`:** Gather engine code coverage, and store it in the `coverage` folder.
 -   **`GREP="pattern"`:** Filter the spec to run based on the pattern.
 
@@ -46,4 +47,6 @@ COVERAGE=1 yarn test           # Compute coverage after a single test run
         variable is set.
     -   `process.env.DISABLE_SYNTHETIC`: is set to `false` by default and `true` if the
         `DISABLE_SYNTHETIC` environment variable is set.
+    -   `FORCED_MIXED_SHADOW_MODE`: is set to `false` by default and `true` if the
+        `FORCED_MIXED_SHADOW_MODE` environment variable is set.
 -   The test setup file (`test-setup.js`) will automatically clean up the DOM before and after each test. So you don't have to do anything to clean up. However, you should use `beforeEach()` rather than `beforeAll()` to add DOM elements for your test, so that the cleanup code can properly clean up the DOM.

packages/integration-karma/scripts/karma-configs/base.js

@@ -12,7 +12,14 @@ const { getModulePath } = require('lwc');
 
 const karmaPluginLwc = require('../karma-plugins/lwc');
 const karmaPluginEnv = require('../karma-plugins/env');
-const { COMPAT, DISABLE_SYNTHETIC, TAGS, GREP, COVERAGE } = require('../shared/options');
+const {
+    COMPAT,
+    DISABLE_SYNTHETIC,
+    FORCED_MIXED_SHADOW_MODE,
+    TAGS,
+    GREP,
+    COVERAGE,
+} = require('../shared/options');
 
 const BASE_DIR = path.resolve(__dirname, '../../test');
 const COVERAGE_DIR = path.resolve(__dirname, '../../coverage');
@@ -45,7 +52,7 @@ function getFiles() {
         frameworkFiles.push(createPattern(LWC_ENGINE_COMPAT));
         frameworkFiles.push(createPattern(WIRE_SERVICE_COMPAT));
     } else {
-        if (!DISABLE_SYNTHETIC) {
+        if (!DISABLE_SYNTHETIC || FORCED_MIXED_SHADOW_MODE) {
             frameworkFiles.push(createPattern(SYNTHETIC_SHADOW));
         }
         frameworkFiles.push(createPattern(LWC_ENGINE));

packages/integration-karma/scripts/karma-plugins/env.js

@@ -15,7 +15,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const { COMPAT, DISABLE_SYNTHETIC } = require('../shared/options');
+const { COMPAT, DISABLE_SYNTHETIC, FORCED_MIXED_SHADOW_MODE } = require('../shared/options');
 
 const DIST_DIR = path.resolve(__dirname, '../../dist');
 const ENV_FILENAME = path.resolve(DIST_DIR, 'env.js');
@@ -31,6 +31,8 @@ function createEnvFile() {
         `        NODE_ENV: "development",`,
         `        COMPAT: ${COMPAT},`,
         `        DISABLE_SYNTHETIC: ${DISABLE_SYNTHETIC},`,
+        `        FORCED_MIXED_SHADOW_MODE: ${FORCED_MIXED_SHADOW_MODE},`,
+        `        NATIVE_SHADOW_MODE: ${DISABLE_SYNTHETIC || FORCED_MIXED_SHADOW_MODE},`,
         `        NATIVE_SHADOW_ROOT_DEFINED: typeof ShadowRoot !== "undefined"`,
         `    }`,
         `};`,

packages/integration-karma/scripts/shared/options.js

@@ -14,6 +14,7 @@ if (process.env.NATIVE_SHADOW) {
 
 const COMPAT = Boolean(process.env.COMPAT);
 const DISABLE_SYNTHETIC = Boolean(process.env.DISABLE_SYNTHETIC);
+const FORCED_MIXED_SHADOW_MODE = Boolean(process.env.FORCED_MIXED_SHADOW_MODE);
 const TAGS = [`${DISABLE_SYNTHETIC ? 'native' : 'synthetic'}-shadow`, COMPAT && 'compat'].filter(
     (v) => Boolean(v)
 );
@@ -22,6 +23,7 @@ module.exports = {
     // Test configuration
     COMPAT,
     DISABLE_SYNTHETIC,
+    FORCED_MIXED_SHADOW_MODE,
     TAGS,
     GREP: process.env.GREP,
     COVERAGE: Boolean(process.env.COVERAGE),

packages/integration-karma/test/accessibility/LightningElement.focus/index.spec.js

@@ -9,7 +9,7 @@ beforeEach(() => {
 });
 
 // TODO [#985]: Firefox does not implement delegatesFocus
-if (!process.env.DISABLE_SYNTHETIC) {
+if (!process.env.NATIVE_SHADOW_MODE) {
     describe('host.focus() when { delegatesFocus: true }', () => {
         it('should focus the host element', () => {
             const elm = createElement('x-focus', { is: DelegatesFocusTrue });

packages/integration-karma/test/api/createElement/index.spec.js

@@ -47,7 +47,7 @@ it('returns an HTMLElement', () => {
     expect(elm instanceof HTMLElement).toBe(true);
 });
 
-if (!process.env.DISABLE_SYNTHETIC) {
+if (!process.env.NATIVE_SHADOW_MODE) {
     it('should create an element with a synthetic shadow root by default', () => {
         const elm = createElement('x-component', { is: Test });
         expect(elm.shadowRoot.constructor.name).toBe('SyntheticShadowRoot');
@@ -64,7 +64,7 @@ it('supports component constructors in circular dependency', () => {
     expect(elm instanceof HTMLElement).toBe(true);
 });
 
-if (process.env.DISABLE_SYNTHETIC) {
+if (process.env.NATIVE_SHADOW_MODE) {
     it('should create an element with a native shadow root if fallback is false', () => {
         const elm = createElement('x-component', {
             is: Test,

packages/integration-karma/test/api/isNodeFromTemplate/index.spec.js

@@ -51,7 +51,7 @@ it('should return true on elements manually inserted in the DOM inside an elemen
     // TODO [#1253]: optimization to synchronously adopt new child nodes added
     // to this elm, we can do that by patching the most common operations
     // on the node itself
-    if (!process.env.DISABLE_SYNTHETIC) {
+    if (!process.env.NATIVE_SHADOW_MODE) {
         expect(isNodeFromTemplate(div)).toBe(false); // it is false sync because MO hasn't pick up the element yet
     }
     return new Promise((resolve) => {
@@ -63,7 +63,7 @@ it('should return true on elements manually inserted in the DOM inside an elemen
 
 // TODO [#1252]: old behavior that is still used by some pieces of the platform
 // if isNodeFromTemplate() returns true, locker will prevent traversing to such elements from document
-if (!process.env.DISABLE_SYNTHETIC) {
+if (!process.env.NATIVE_SHADOW_MODE) {
     it('should return false on elements manually inserted in the DOM inside an element NOT marked with lwc:dom="manual"', () => {
         const elm = createElement('x-test', { is: Test });
         document.body.appendChild(elm);

packages/integration-karma/test/component/lifecycle-callbacks/index.spec.js

@@ -142,7 +142,7 @@ orderings. For any given component, the invariants are:
 
 It's ok to update the orderings below after a refactor, as long as these invariants hold!
 */
-if (process.env.DISABLE_SYNTHETIC) {
+if (process.env.NATIVE_SHADOW_MODE) {
     it(`should invoke connectedCallback and renderedCallback in the expected order (native shadow)`, () => {
         const elm = createElement('order-container', { is: Container });
         document.body.appendChild(elm);

packages/integration-karma/test/host-element/index.spec.js

@@ -5,7 +5,7 @@ describe('host element', () => {
     it('should accept children being appended to it', () => {
         const element = createElement('x-container', { is: Shadow });
         document.body.appendChild(element);
-        if (process.env.DISABLE_SYNTHETIC) {
+        if (process.env.NATIVE_SHADOW_MODE) {
             // synthetic shadow returns null here even though it successfully inserts the div
             expect(element.firstChild.tagName).toEqual('DIV');
         }

packages/integration-karma/test/light-dom/ids/index.spec.js

@@ -36,7 +36,7 @@ describe('Light DOM IDs and fragment links', () => {
         expect(light.querySelector('.go-to-bar').href).toMatch(/#bar$/);
         expect(light.querySelector('.go-to-quux').href).toMatch(/#quux$/);
 
-        if (process.env.DISABLE_SYNTHETIC) {
+        if (process.env.NATIVE_SHADOW_MODE) {
             expect(shadow.shadowRoot.querySelector('.foo').id).toEqual('foo');
             expect(shadow.shadowRoot.querySelector('.quux').id).toEqual('quux');
             expect(shadow.shadowRoot.querySelector('.go-to-foo').href).toMatch(/#foo$/);

packages/integration-karma/test/light-dom/slotting/index.spec.js

@@ -55,7 +55,7 @@ describe('Slotting', () => {
     it('shadow container, light consumer', () => {
         const nodes = createTestElement('x-light-consumer', LightConsumer);
 
-        const expected = process.env.DISABLE_SYNTHETIC // native shadow doesn't output slots in innerHTML
+        const expected = process.env.NATIVE_SHADOW_MODE // native shadow doesn't output slots in innerHTML
             ? '<x-shadow-container><p data-id="light-consumer-text">Hello from Light DOM</p></x-shadow-container>'
             : '<x-shadow-container><slot><p data-id="light-consumer-text">Hello from Light DOM</p></slot></x-shadow-container>';
         expect(nodes['x-light-consumer'].innerHTML).toEqual(expected);

packages/integration-karma/test/light-dom/style-global/index.spec.js

@@ -16,7 +16,7 @@ describe('Light DOM styling at the global level', () => {
         expect(getColor(elm.querySelector('x-one .globally-styled'))).toEqual('rgb(0, 0, 255)');
         expect(getColor(elm.querySelector('x-two .globally-styled'))).toEqual('rgb(0, 0, 255)');
         // synthetic shadow can't do this kind of style encapsulation
-        if (process.env.DISABLE_SYNTHETIC === true) {
+        if (process.env.NATIVE_SHADOW_MODE) {
             expect(
                 getColor(elm.querySelector('x-shadow').shadowRoot.querySelector('.globally-styled'))
             ).toEqual('rgb(0, 0, 0)');
@@ -31,7 +31,7 @@ describe('Light DOM styling at the global level', () => {
 
         expect(getColor(two.querySelector('.globally-styled'))).toEqual('rgb(0, 0, 255)');
         // synthetic shadow can't do this kind of style encapsulation
-        if (process.env.DISABLE_SYNTHETIC === true) {
+        if (process.env.NATIVE_SHADOW_MODE) {
             expect(getColor(shadow.shadowRoot.querySelector('.globally-styled'))).toEqual(
                 'rgb(0, 0, 0)'
             );

packages/integration-karma/test/light-dom/style-with-host/index.spec.js

@@ -2,7 +2,7 @@ import { createElement } from 'lwc';
 import Container from 'x/container';
 
 // synthetic shadow can't do this kind of style encapsulation
-if (process.env.DISABLE_SYNTHETIC === true) {
+if (process.env.NATIVE_SHADOW_MODE) {
     describe('Light DOM styling with :host', () => {
         it(':host can style a containing shadow component', () => {
             const elm = createElement('x-container', { is: Container });

packages/integration-karma/test/light-dom/style/index.spec.js

@@ -20,7 +20,7 @@ describe('Light DOM styling', () => {
             'rgb(255, 0, 0)'
         );
         // synthetic shadow can't do this kind of style encapsulation
-        if (process.env.DISABLE_SYNTHETIC === true) {
+        if (process.env.NATIVE_SHADOW_MODE) {
             expect(
                 getColor(
                     elm.shadowRoot
@@ -31,7 +31,7 @@ describe('Light DOM styling', () => {
         }
 
         // synthetic shadow can't do this kind of style encapsulation
-        if (process.env.DISABLE_SYNTHETIC === true) {
+        if (process.env.NATIVE_SHADOW_MODE) {
             // sibling elements should be unaffected
             const two = createElement('x-two', { is: Two });
             const shadow = createElement('x-shadow', { is: Shadow });

packages/integration-karma/test/light-dom/synthetic-shadow-styles/index.spec.js

@@ -2,7 +2,7 @@ import { createElement } from 'lwc';
 import Container from 'x/container';
 
 // This test only matters for synthetic shadow
-if (!process.env.DISABLE_SYNTHETIC) {
+if (!process.env.NATIVE_SHADOW_MODE) {
     describe('Light DOM and synthetic shadow', () => {
         it('shadow scoping tokens are not set for light DOM components', () => {
             // shadow grandparent, light child, shadow grandchild

packages/integration-karma/test/mixed-shadow-mode/transitivity/index.spec.js

@@ -20,9 +20,7 @@ function assertNativeShadowRootWhenPossible(elm) {
     }
 }
 
-const SYNTHETIC_SHADOW_DEFINED = !process.env.DISABLE_SYNTHETIC;
-
-if (SYNTHETIC_SHADOW_DEFINED) {
+if (!process.env.NATIVE_SHADOW_MODE) {
     describe('when root component shadowSupportMode="any"', () => {
         let elm;
 

packages/integration-karma/test/native-shadow/Event-methods/Event.composedPath.spec.js

@@ -99,7 +99,7 @@ if (process.env.COMPAT !== true) {
             document.body.appendChild(synthetic);
 
             let expected;
-            if (process.env.DISABLE_SYNTHETIC) {
+            if (process.env.NATIVE_SHADOW_MODE) {
                 expected = [
                     div.shadowRoot,
                     div,

packages/integration-karma/test/polyfills/document-properties/index.spec.js

@@ -51,7 +51,7 @@ describe('dynamic nodes', () => {
             expect(document.querySelector('span.manual-span')).toBe(null);
         });
     });
-    if (!process.env.DISABLE_SYNTHETIC) {
+    if (!process.env.NATIVE_SHADOW_MODE) {
         // TODO [#1252]: old behavior that is still used by some pieces of the platform
         // that is only useful in synthetic mode where elements inserted manually without lwc:dom="manual"
         // are still considered global elements

packages/integration-karma/test/rendering/elements-are-not-recycled/index.spec.js

@@ -29,15 +29,15 @@ describe('custom elements', () => {
                 expect(xSimple.assignedSlot).not.toBeNull();
                 expect(elm.shadowRoot.querySelector('.mark')).not.toBeNull();
 
-                if (!process.env.DISABLE_SYNTHETIC) {
+                if (!process.env.NATIVE_SHADOW_MODE) {
                     expect(xSimple).not.toBe(firstRenderCustomElement);
                 }
             });
     });
 });
 
 describe('elements', () => {
-    if (!process.env.DISABLE_SYNTHETIC) {
+    if (!process.env.NATIVE_SHADOW_MODE) {
         it('should not be reused when slotted', function () {
             const elm = createElement('x-container', { is: Container });
             elm.isElement = true;
@@ -94,7 +94,7 @@ describe('elements', () => {
     });
 });
 
-if (process.env.DISABLE_SYNTHETIC) {
+if (process.env.NATIVE_SHADOW_MODE) {
     it('should render same styles for custom element instances', function () {
         const elm = createElement('x-container', { is: Container });
         elm.isStyleCheck = true;

packages/integration-karma/test/shadow-dom/Event-properties/Event.target.spec.js

@@ -74,7 +74,7 @@ describe('Event.target', () => {
         div.dispatchEvent(new CustomEvent('test', { bubbles: true, composed: true }));
     });
 
-    if (!process.env.DISABLE_SYNTHETIC) {
+    if (!process.env.NATIVE_SHADOW_MODE) {
         describe('legacy behavior', () => {
             beforeAll(() => {
                 // Suppress error logging

packages/integration-karma/test/shadow-dom/MutationObserver/MutationObserver.spec.js

@@ -425,7 +425,7 @@ describe('MutationObserver is synthetic shadow dom aware.', () => {
             });
         });
     });
-    if (!process.env.DISABLE_SYNTHETIC) {
+    if (!process.env.NATIVE_SHADOW_MODE) {
         describe('References to mutation observers are not leaked', () => {
             let container;
             beforeEach(() => {

packages/integration-karma/test/shadow-dom/Node-properties/Node.childNodes.spec.js

@@ -48,13 +48,13 @@ describe('Node.childNodes', () => {
         // While with synthetic shadow, the fallback slot content is only rendered only when the slot has no assigned
         // nodes.
         expect(container.shadowRoot.querySelector('slot').childNodes.length).toBe(
-            process.env.DISABLE_SYNTHETIC ? 1 : 0
+            process.env.NATIVE_SHADOW_MODE ? 1 : 0
         );
     });
 
     // TODO [#1761]: Difference in behavior of slot.childNodes in native and synthetic-shadow
     // enable this test in synthetic-shadow mode once the bug is fixed
-    if (process.env.DISABLE_SYNTHETIC) {
+    if (process.env.NATIVE_SHADOW_MODE) {
         it('should always return an default content for slots not rendering default content', () => {
             const elm = createElement('x-slotted-parent', { is: SlottedParent });
             document.body.appendChild(elm);

packages/integration-karma/test/shadow-dom/Node-properties/Node.getRootNode.spec.js

@@ -314,7 +314,7 @@ describe('Node.getRootNode', () => {
             expect(processingInstruction.getRootNode(composedTrueConfig)).toBe(fragment);
         });
 
-        if (process.env.DISABLE_SYNTHETIC) {
+        if (process.env.NATIVE_SHADOW_MODE) {
             it('native shadow dom', () => {
                 const shadowHost = document.createElement('div');
                 document.body.appendChild(shadowHost);

packages/integration-karma/test/shadow-dom/Node-properties/Node.hasChildNodes.spec.js

@@ -26,7 +26,7 @@ describe('Node.hasChildNodes', () => {
 
         expect(container.shadowRoot.querySelector('.container').hasChildNodes()).toBe(true);
         expect(container.shadowRoot.querySelector('slot').hasChildNodes()).toBe(
-            process.env.DISABLE_SYNTHETIC
+            process.env.NATIVE_SHADOW_MODE
         );
     });
 });

packages/integration-karma/test/shadow-dom/Node-properties/Node.textContent.spec.js

@@ -19,10 +19,10 @@ describe('Node.textContent - getter', () => {
 
         const container = elm.shadowRoot.querySelector('x-container');
         expect(container.shadowRoot.textContent).toBe(
-            process.env.DISABLE_SYNTHETIC ? 'Before[default-slotted]After' : 'Before[]After'
+            process.env.NATIVE_SHADOW_MODE ? 'Before[default-slotted]After' : 'Before[]After'
         );
         expect(container.shadowRoot.querySelector('slot').textContent).toBe(
-            process.env.DISABLE_SYNTHETIC ? 'default-slotted' : ''
+            process.env.NATIVE_SHADOW_MODE ? 'default-slotted' : ''
         );
     });
 });

packages/integration-karma/test/shadow-dom/ShadowRoot-properties/ShadowRoot.delegatesFocus.spec.js

@@ -3,7 +3,7 @@ import { createElement } from 'lwc';
 
 describe('ShadowRoot.delegatesFocus', () => {
     // TODO [#985]: delegatedFocus is only implemented the native ShadowRoot by Blink
-    if (!process.env.DISABLE_SYNTHETIC) {
+    if (!process.env.NATIVE_SHADOW_MODE) {
         it('ShadowRoot.delegatesFocus should be false by default', () => {
             class NoDelegatesFocus extends LightningElement {}
 

packages/integration-karma/test/shadow-dom/ShadowRoot-properties/ShadowRoot.spec.js

@@ -66,7 +66,7 @@ describe('Properties overrides', () => {
     });
 });
 
-if (!process.env.DISABLE_SYNTHETIC) {
+if (!process.env.NATIVE_SHADOW_MODE) {
     describe('synthetic-shadow restrictions', () => {
         let elm;
 

packages/integration-karma/test/shadow-dom/ShadowRoot.elementsFromPoint/index.spec.js

@@ -20,7 +20,7 @@ describe('elementsFromPoint', () => {
     // https://crbug.com/1207863#c4
     const onlyIncludesElementsInImmediateShadowRoot = (() => {
         function detect() {
-            if (!process.env.DISABLE_SYNTHETIC) {
+            if (!process.env.NATIVE_SHADOW_MODE) {
                 return false; // in synthetic shadow we control the behavior, so we match Chrome/Safari
             }
             // detect the Firefox behavior

packages/integration-karma/test/shadow-dom/event-in-shadow-tree/event-post-dispatch.spec.js

@@ -35,7 +35,7 @@ describe('post-dispatch event state', () => {
 
         // WebKit bug - https://bugs.webkit.org/show_bug.cgi?id=206374
         // In Safari, the event target is not null.
-        if (process.env.DISABLE_SYNTHETIC !== true) {
+        if (!process.env.NATIVE_SHADOW_MODE) {
             it('{ bubbles: true, composed: false }', () => {
                 const nodes = createComponent();
                 const event = new CustomEvent('test', { bubbles: true, composed: false });
@@ -62,7 +62,7 @@ describe('post-dispatch event state', () => {
 
         // WebKit bug - https://bugs.webkit.org/show_bug.cgi?id=206374
         // In Safari, the event target is not null.
-        if (process.env.DISABLE_SYNTHETIC !== true) {
+        if (!process.env.NATIVE_SHADOW_MODE) {
             it('{ bubbles: true, composed: false }', () => {
                 const nodes = createComponent();
                 const event = new CustomEvent('test', { bubbles: true, composed: false });