fix(runtime): hydrate shadow dom first (#5911)

* fix(runtime): hydrate shadow dom first

* prettier

* hydrate shadow first

* remove any

* don't remove vnodes that are about to be hydrated

* prettier

Author: christian-bromann

src/runtime/client-hydrate.ts

@@ -154,19 +154,6 @@ const clientHydrate = (
       }
     }
 
-    // recursively drill down, end to start so we can remove nodes
-    for (i = node.childNodes.length - 1; i >= 0; i--) {
-      clientHydrate(
-        parentVNode,
-        childRenderNodes,
-        slotNodes,
-        shadowRootNodes,
-        hostElm,
-        node.childNodes[i] as any,
-        hostId,
-      );
-    }
-
     if (node.shadowRoot) {
       // keep drilling down through the shadow root nodes
       for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
@@ -181,6 +168,19 @@ const clientHydrate = (
         );
       }
     }
+
+    // recursively drill down, end to start so we can remove nodes
+    for (i = node.childNodes.length - 1; i >= 0; i--) {
+      clientHydrate(
+        parentVNode,
+        childRenderNodes,
+        slotNodes,
+        shadowRootNodes,
+        hostElm,
+        node.childNodes[i] as any,
+        hostId,
+      );
+    }
   } else if (node.nodeType === NODE_TYPE.CommentNode) {
     // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
     childIdSplt = node.nodeValue.split('.');
@@ -293,14 +293,14 @@ const clientHydrate = (
 export const initializeDocumentHydrate = (node: d.RenderNode, orgLocNodes: d.PlatformRuntime['$orgLocNodes$']) => {
   if (node.nodeType === NODE_TYPE.ElementNode) {
     let i = 0;
-    for (; i < node.childNodes.length; i++) {
-      initializeDocumentHydrate(node.childNodes[i] as any, orgLocNodes);
-    }
     if (node.shadowRoot) {
-      for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
-        initializeDocumentHydrate(node.shadowRoot.childNodes[i] as any, orgLocNodes);
+      for (; i < node.shadowRoot.childNodes.length; i++) {
+        initializeDocumentHydrate(node.shadowRoot.childNodes[i] as d.RenderNode, orgLocNodes);
       }
     }
+    for (i = 0; i < node.childNodes.length; i++) {
+      initializeDocumentHydrate(node.childNodes[i] as d.RenderNode, orgLocNodes);
+    }
   } else if (node.nodeType === NODE_TYPE.CommentNode) {
     const childIdSplt = node.nodeValue.split('.');
     if (childIdSplt[0] === ORG_LOCATION_ID) {

src/runtime/vdom/vdom-render.ts

@@ -704,7 +704,12 @@ export const patch = (oldVNode: d.VNode, newVNode: d.VNode, isInitialRender = fa
       }
       // add the new vnode children
       addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
-    } else if (BUILD.updatable && oldChildren !== null) {
+    } else if (
+      // don't do this on initial render as it can cause non-hydrated content to be removed
+      !isInitialRender &&
+      BUILD.updatable &&
+      oldChildren !== null
+    ) {
       // no new child vnodes, but there are old child vnodes to remove
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }

test/end-to-end/src/declarative-shadow-dom/test.e2e.ts

@@ -218,7 +218,7 @@ describe('renderToString', () => {
     `,
       {
         serializeShadowRoot: true,
-        fullDocument: false,
+        fullDocument: true,
       },
     );
 
@@ -255,6 +255,10 @@ describe('renderToString', () => {
     expect(html).toContain(
       `<car-detail custom-hydrate-flag=\"\" c-id=\"2.4.2.0\" s-id=\"4\"><!--r.4--><section c-id=\"4.0.0.0\"><!--t.4.1.1.0-->2023 VW Beetle</section></car-detail>`,
     );
+
+    const page = await newE2EPage({ html, url: 'https://stencil.com' });
+    const cars = await page.findAll('>>>car-detail');
+    expect(cars.map((car) => car.textContent)).toEqual(['2024 VW Vento', '2023 VW Beetle']);
   });
 
   it('calls beforeHydrate and afterHydrate function hooks', async () => {