fix(runtime): re-relocate slot if parent element's tagname changes

If a slot is located in an element and that element's tag is dynamically changed (e.g. from `p` to `span`), we need to re-relocate the slot on re-render

STENCIL-672: slot element loses its parent reference and disappears when its parent is rendered conditionally

Fixes: #4284, #3913

src/runtime/vdom/vdom-render.ts

@@ -976,6 +976,18 @@ render() {
         }
       }
 
+      if (BUILD.experimentalSlotFixes) {
+        // Figure out if there are any slotRefNodes that are also nodes to relocate.
+        // If so, those nodes need to be relocated before any content is relocated to them.
+        relocateNodes.forEach((relocateData, _, arr) => {
+          const indexOfNodeToRelocate = arr.findIndex((r) => r.$nodeToRelocate$ === relocateData.$slotRefNode$);
+          if (indexOfNodeToRelocate > -1) {
+            arr.unshift(arr[indexOfNodeToRelocate]);
+            arr.splice(indexOfNodeToRelocate + 1, 1);
+          }
+        });
+      }
+
       for (const relocateData of relocateNodes) {
         const nodeToRelocate = relocateData.$nodeToRelocate$;
         const slotRefNode = relocateData.$slotRefNode$;
@@ -1027,7 +1039,7 @@ render() {
             // has a different next sibling or parent relocated
 
             if (nodeToRelocate !== insertBeforeNode) {
-              if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
+              if (!BUILD.experimentalSlotFixes && !nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
                 // probably a component in the index.html that doesn't have its hostname set
                 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
               }