fix: avoid synthetic shadow specific logic for light dom in native mode

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

@@ -253,11 +253,13 @@ const CustomElementHook: Hooks<VCustomElement> = {
 };
 
 function linkNodeToShadow(elm: Node, owner: VM) {
-    const { renderMode, shadowMode } = owner;
+    const { renderer, renderMode, shadowMode } = owner;
 
     // TODO [#1164]: this should eventually be done by the polyfill directly
-    if (shadowMode === ShadowMode.Synthetic || renderMode === RenderMode.Light) {
-        (elm as any)[KEY__SHADOW_RESOLVER] = getRenderRoot(owner)[KEY__SHADOW_RESOLVER];
+    if (renderer.isSyntheticShadowDefined) {
+        if (shadowMode === ShadowMode.Synthetic || renderMode === RenderMode.Light) {
+            (elm as any)[KEY__SHADOW_RESOLVER] = getRenderRoot(owner)[KEY__SHADOW_RESOLVER];
+        }
     }
 }
 

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

@@ -165,14 +165,16 @@ export function allocateChildrenHook(vnode: VCustomElement, vm: VM) {
 
     vm.aChildren = children;
 
-    const { renderMode, shadowMode } = vm;
-    if (shadowMode === ShadowMode.Synthetic || renderMode === RenderMode.Light) {
-        // slow path
-        allocateInSlot(vm, children);
-        // save the allocated children in case this vnode is reused.
-        vnode.aChildren = children;
-        // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
-        vnode.children = EmptyArray;
+    const { renderer, renderMode, shadowMode } = vm;
+    if (renderer.isSyntheticShadowDefined) {
+        if (shadowMode === ShadowMode.Synthetic || renderMode === RenderMode.Light) {
+            // slow path
+            allocateInSlot(vm, children);
+            // save the allocated children in case this vnode is reused.
+            vnode.aChildren = children;
+            // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
+            vnode.children = EmptyArray;
+        }
     }
 }
 

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

@@ -10,7 +10,7 @@ export type HostElement = any;
 
 export interface Renderer<N = HostNode, E = HostElement> {
     ssr: boolean;
-    syntheticShadow: boolean;
+    isSyntheticShadowDefined: boolean;
     insert(node: N, parent: E, anchor: N | null): void;
     remove(node: N, parent: E): void;
     createElement(tagName: string, namespace?: string): E;

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

@@ -288,7 +288,7 @@ export function createVM<HostNode, HostElement>(
     const { mode, owner, renderer, tagName } = options;
 
     let shadowMode;
-    if (renderer.syntheticShadow) {
+    if (renderer.isSyntheticShadowDefined) {
         if (def.renderMode === RenderMode.Light) {
             shadowMode = ShadowMode.Native;
         } else {

packages/@lwc/engine-dom/src/apis/is-node-from-template.ts

@@ -26,7 +26,7 @@ export function isNodeFromTemplate(node: Node): boolean {
     if (node instanceof ShadowRoot) {
         return false;
     }
-    if (renderer.syntheticShadow) {
+    if (renderer.isSyntheticShadowDefined) {
         // TODO [#1252]: old behavior that is still used by some pieces of the platform,
         // specifically, nodes inserted manually on places where `lwc:dom="manual"` directive is not
         // used, will be considered global elements.

packages/@lwc/engine-dom/src/renderer.ts

@@ -93,7 +93,7 @@ if (isCustomElementRegistryAvailable()) {
 export const renderer: Renderer<Node, Element> = {
     ssr: false,
 
-    syntheticShadow: hasOwnProperty.call(Element.prototype, KEY__SHADOW_TOKEN),
+    isSyntheticShadowDefined: hasOwnProperty.call(Element.prototype, KEY__SHADOW_TOKEN),
 
     createElement(tagName: string, namespace: string): Element {
         return isUndefined(namespace)

packages/@lwc/engine-server/src/renderer.ts

@@ -62,7 +62,7 @@ class HTMLElement {
 export const renderer: Renderer<HostNode, HostElement> = {
     ssr: true,
 
-    syntheticShadow: false,
+    isSyntheticShadowDefined: false,
 
     insert(node, parent, anchor) {
         if (node.parent !== null && node.parent !== parent) {