fix(runtime): do regular clone of normal slotting (#2694)

Co-Authored-By: Justus Romijn <[email protected]>

Author: justusromijn

src/runtime/dom-extras.ts

@@ -13,16 +13,22 @@ export const patchCloneNode = (HostElementPrototype: any) => {
     const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false) as Node;
     if (BUILD.slot && !isShadowDom && deep) {
       let i = 0;
-      let slotted;
+      let slotted, nonStencilNode;
+      let stencilPrivates = ['s-id', 's-cr', 's-lr', 's-rc', 's-sc', 's-p', 's-cn', 's-sr', 's-sn', 's-hn', 's-ol', 's-nr', 's-si'];
+      
       for (; i < srcNode.childNodes.length; i++) {
         slotted = (srcNode.childNodes[i] as any)['s-nr'];
+        nonStencilNode = stencilPrivates.every((privateField) => !(srcNode.childNodes[i] as any)[privateField]);
         if (slotted) {
           if (BUILD.appendChildSlotFix && (clonedNode as any).__appendChild) {
             (clonedNode as any).__appendChild(slotted.cloneNode(true));
           } else {
             clonedNode.appendChild(slotted.cloneNode(true));
           }
         }
+        if (nonStencilNode){
+          clonedNode.appendChild((srcNode.childNodes[i] as any).cloneNode(true));
+        }
       }
     }
     return clonedNode;

test/karma/karma.config.js

@@ -96,6 +96,7 @@ module.exports = function (config) {
       // 'test-app/prerender-test/karma.spec.ts',
       'test-app/**/*.spec.ts',
       'test-app/util.ts',
+      'test-app/assets/angular.min.js',
       { pattern: 'www/**/*', watched: false, included: false, served: true, nocache: true, type: 'module' },
     ],
 

test/karma/test-app/assets/angular.min.js

@@ -268,6 +268,8 @@ export namespace Components {
     }
     interface SlotNestedOrderParent {
     }
+    interface SlotNgIf {
+    }
     interface SlotNoDefault {
     }
     interface SlotReorder {
@@ -910,6 +912,12 @@ declare global {
         prototype: HTMLSlotNestedOrderParentElement;
         new (): HTMLSlotNestedOrderParentElement;
     };
+    interface HTMLSlotNgIfElement extends Components.SlotNgIf, HTMLStencilElement {
+    }
+    var HTMLSlotNgIfElement: {
+        prototype: HTMLSlotNgIfElement;
+        new (): HTMLSlotNgIfElement;
+    };
     interface HTMLSlotNoDefaultElement extends Components.SlotNoDefault, HTMLStencilElement {
     }
     var HTMLSlotNoDefaultElement: {
@@ -1091,6 +1099,7 @@ declare global {
         "slot-map-order-root": HTMLSlotMapOrderRootElement;
         "slot-nested-order-child": HTMLSlotNestedOrderChildElement;
         "slot-nested-order-parent": HTMLSlotNestedOrderParentElement;
+        "slot-ng-if": HTMLSlotNgIfElement;
         "slot-no-default": HTMLSlotNoDefaultElement;
         "slot-reorder": HTMLSlotReorderElement;
         "slot-reorder-root": HTMLSlotReorderRootElement;
@@ -1372,6 +1381,8 @@ declare namespace LocalJSX {
     }
     interface SlotNestedOrderParent {
     }
+    interface SlotNgIf {
+    }
     interface SlotNoDefault {
     }
     interface SlotReorder {
@@ -1503,6 +1514,7 @@ declare namespace LocalJSX {
         "slot-map-order-root": SlotMapOrderRoot;
         "slot-nested-order-child": SlotNestedOrderChild;
         "slot-nested-order-parent": SlotNestedOrderParent;
+        "slot-ng-if": SlotNgIf;
         "slot-no-default": SlotNoDefault;
         "slot-reorder": SlotReorder;
         "slot-reorder-root": SlotReorderRoot;
@@ -1624,6 +1636,7 @@ declare module "@stencil/core" {
             "slot-map-order-root": LocalJSX.SlotMapOrderRoot & JSXBase.HTMLAttributes<HTMLSlotMapOrderRootElement>;
             "slot-nested-order-child": LocalJSX.SlotNestedOrderChild & JSXBase.HTMLAttributes<HTMLSlotNestedOrderChildElement>;
             "slot-nested-order-parent": LocalJSX.SlotNestedOrderParent & JSXBase.HTMLAttributes<HTMLSlotNestedOrderParentElement>;
+            "slot-ng-if": LocalJSX.SlotNgIf & JSXBase.HTMLAttributes<HTMLSlotNgIfElement>;
             "slot-no-default": LocalJSX.SlotNoDefault & JSXBase.HTMLAttributes<HTMLSlotNoDefaultElement>;
             "slot-reorder": LocalJSX.SlotReorder & JSXBase.HTMLAttributes<HTMLSlotReorderElement>;
             "slot-reorder-root": LocalJSX.SlotReorderRoot & JSXBase.HTMLAttributes<HTMLSlotReorderRootElement>;

test/karma/test-app/assets/angular.min.js.map

@@ -0,0 +1,15 @@
+import { Component, h, Host } from "@stencil/core";
+
+@Component({
+  tag: "slot-ng-if",
+  shadow: false,
+})
+export class AngularSlotBinding {
+  render() {
+    return (
+      <Host>
+        <slot />
+      </Host>
+    );
+  }
+}

test/karma/test-app/components.d.ts

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<script src="/assets/angular.min.js"></script>
+<script src="/build/testapp.esm.js" type="module"></script>
+<script src="/build/testapp.js" nomodule></script>
+<section id="demo">bla
+    <section ng-controller="homeCtrl as vm">
+        <div ng-if="vm.show">
+            <slot-ng-if><span>{{vm.label}}</span></slot-ng-if>
+        </div>
+    </section>
+</section>
+<script>
+    angular.module('demo', []).controller('homeCtrl', homeCtrl);
+    function homeCtrl() {
+        var vm = this;
+        vm.label = 'Angular Bound Label';
+        vm.show = true;
+    }
+    angular.bootstrap(document.querySelector('#demo'), ['demo']);
+
+</script>