feat: handle light dom components

salesforce · Sep 27, 2021 · 636ed99 · 636ed99
1 parent 93862f0
commit 636ed99
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts
@@ -323,7 +323,13 @@ const CustomElementHook: Hooks<VCustomElement> = {
             }
             runConnectedCallback(vm);
         }
-        hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
+
+        if (!(vm && vm.renderMode === RenderMode.Light)) {
+            // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+            // Note: for Light DOM, this is handled while hydrating the VM
+            hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
+        }
+
         if (vm) {
             hydrateVM(vm);
         }

diff --git a/packages/@lwc/engine-core/src/framework/vm.ts b/packages/@lwc/engine-core/src/framework/vm.ts
@@ -432,7 +432,9 @@ function hydrate(vm: VM) {
         const children = renderComponent(vm);
         vm.children = children;
 
-        hydrateChildrenHook(vm.elm.shadowRoot.childNodes, children, vm);
+        const vmChildren =
+            vm.renderMode === RenderMode.Light ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
+        hydrateChildrenHook(vmChildren, children, vm);
 
         runRenderedCallback(vm);
     }