fix(runtime): do regular clone of normal slotting

src/runtime/dom-extras.ts

@@ -12,16 +12,22 @@ export const cloneNodeFix = (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

@@ -58,14 +58,12 @@ if (process.platform === 'win32') {
   localLaunchers.Edge = {
     base: 'Edge'
   };
-
 } else if (process.platform === 'darwin') {
   // localLaunchers.Safari = {
   //   base: 'Safari'
   // };
 }
 
-
 module.exports = function (config) {
   config.set({
     plugins: [
@@ -109,6 +107,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/components.d.ts

@@ -196,6 +196,7 @@ export namespace Components {
   interface SlotMapOrderRoot {}
   interface SlotNestedOrderChild {}
   interface SlotNestedOrderParent {}
+  interface SlotNgIf {}
   interface SlotNoDefault {}
   interface SlotReorder {
     'reordered': boolean;
@@ -811,6 +812,12 @@ declare global {
     new (): HTMLSlotNestedOrderParentElement;
   };
 
+  interface HTMLSlotNgIfElement extends Components.SlotNgIf, HTMLStencilElement {}
+  var HTMLSlotNgIfElement: {
+    prototype: HTMLSlotNgIfElement;
+    new (): HTMLSlotNgIfElement;
+  };
+
   interface HTMLSlotNoDefaultElement extends Components.SlotNoDefault, HTMLStencilElement {}
   var HTMLSlotNoDefaultElement: {
     prototype: HTMLSlotNoDefaultElement;
@@ -982,6 +989,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;
@@ -1183,6 +1191,7 @@ declare namespace LocalJSX {
   interface SlotMapOrderRoot {}
   interface SlotNestedOrderChild {}
   interface SlotNestedOrderParent {}
+  interface SlotNgIf {}
   interface SlotNoDefault {}
   interface SlotReorder {
     'reordered'?: boolean;
@@ -1300,6 +1309,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;
@@ -1420,6 +1430,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/slot-ng-if/cmp.tsx

@@ -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/slot-ng-if/index.html

@@ -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>

test/karma/test-app/slot-ng-if/karma.spec.ts

@@ -0,0 +1,16 @@
+import { setupDomTests } from '../util';
+
+describe('slot-ng-if', function() {
+  const { setupDom, tearDownDom } = setupDomTests(document);
+  let app: HTMLElement;
+
+  beforeEach(async () => {
+    app = await setupDom('/slot-ng-if/index.html');
+  });
+  afterEach(tearDownDom);
+
+  it('renders bound values in slots within ng-if context', async () => {
+    const root = app.querySelector('slot-ng-if');
+    expect(root.textContent).toBe('Angular Bound Label');
+  });
+});