fix(runtime): allow cloneNode patch even without <slot> (#6513)

* fix(runtime): allow `cloneNode` patch even without <slot>

* chore:

---------

Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

Author: johnjenkins

src/runtime/bootstrap-custom-element.ts

@@ -73,6 +73,8 @@ export const proxyCustomElement = (Cstr: any, compactMeta: d.ComponentRuntimeMet
         patchTextContent(Cstr.prototype);
       }
     }
+  } else if (BUILD.cloneNodeFix) {
+    patchCloneNode(Cstr.prototype);
   }
 
   if (BUILD.hydrateClientSide && BUILD.shadowDom) {

src/runtime/bootstrap-lazy.ts

@@ -215,6 +215,8 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
             patchTextContent(HostElement.prototype);
           }
         }
+      } else if (BUILD.cloneNodeFix) {
+        patchCloneNode(HostElement.prototype);
       }
 
       // if the component is formAssociated we need to set that on the host

src/runtime/dom-extras.ts

@@ -34,8 +34,9 @@ export const patchPseudoShadowDom = (hostElementPrototype: HTMLElement) => {
  *
  * @param HostElementPrototype The Stencil component to be patched
  */
-export const patchCloneNode = (HostElementPrototype: HTMLElement) => {
-  const orgCloneNode = HostElementPrototype.cloneNode;
+export const patchCloneNode = (HostElementPrototype: any) => {
+  if (HostElementPrototype.__cloneNode) return;
+  const orgCloneNode = (HostElementPrototype.__cloneNode = HostElementPrototype.cloneNode);
 
   HostElementPrototype.cloneNode = function (deep?: boolean) {
     const srcNode = this;
@@ -91,6 +92,7 @@ export const patchCloneNode = (HostElementPrototype: HTMLElement) => {
  * @param HostElementPrototype The Stencil component to be patched
  */
 export const patchSlotAppendChild = (HostElementPrototype: any) => {
+  if (HostElementPrototype.__appendChild) return;
   HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
 
   HostElementPrototype.appendChild = function (this: d.RenderNode, newChild: d.RenderNode) {
@@ -122,6 +124,7 @@ export const patchSlotAppendChild = (HostElementPrototype: any) => {
  * @param ElementPrototype The Stencil component to be patched
  */
 const patchSlotRemoveChild = (ElementPrototype: any) => {
+  if (ElementPrototype.__removeChild) return;
   ElementPrototype.__removeChild = ElementPrototype.removeChild;
 
   ElementPrototype.removeChild = function (this: d.RenderNode, toRemove: d.RenderNode) {
@@ -146,6 +149,7 @@ const patchSlotRemoveChild = (ElementPrototype: any) => {
  * @param HostElementPrototype the `Element` to be patched
  */
 export const patchSlotPrepend = (HostElementPrototype: HTMLElement) => {
+  if ((HostElementPrototype as any).__prepend) return;
   (HostElementPrototype as any).__prepend = HostElementPrototype.prepend;
 
   HostElementPrototype.prepend = function (this: d.HostElement, ...newChildren: (d.RenderNode | string)[]) {
@@ -183,6 +187,7 @@ export const patchSlotPrepend = (HostElementPrototype: HTMLElement) => {
  * @param HostElementPrototype the `Element` to be patched
  */
 export const patchSlotAppend = (HostElementPrototype: HTMLElement) => {
+  if ((HostElementPrototype as any).__append) return;
   (HostElementPrototype as any).__append = HostElementPrototype.append;
   HostElementPrototype.append = function (this: d.HostElement, ...newChildren: (d.RenderNode | string)[]) {
     newChildren.forEach((newChild: d.RenderNode | string) => {
@@ -202,6 +207,7 @@ export const patchSlotAppend = (HostElementPrototype: HTMLElement) => {
  * @param HostElementPrototype the `Element` to be patched
  */
 export const patchSlotInsertAdjacentHTML = (HostElementPrototype: HTMLElement) => {
+  if ((HostElementPrototype as any).__insertAdjacentHTML) return;
   const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML;
 
   HostElementPrototype.insertAdjacentHTML = function (this: d.HostElement, position: InsertPosition, text: string) {
@@ -249,6 +255,7 @@ export const patchSlotInsertAdjacentText = (HostElementPrototype: HTMLElement) =
  * @param HostElementPrototype the custom element prototype to patch
  */
 const patchInsertBefore = (HostElementPrototype: HTMLElement) => {
+  if ((HostElementPrototype as any).__insertBefore) return;
   const eleProto: d.RenderNode = HostElementPrototype;
   if (eleProto.__insertBefore) return;
 
@@ -318,6 +325,7 @@ const patchInsertBefore = (HostElementPrototype: HTMLElement) => {
  * @param HostElementPrototype the `Element` to be patched
  */
 export const patchSlotInsertAdjacentElement = (HostElementPrototype: HTMLElement) => {
+  if ((HostElementPrototype as any).__insertAdjacentElement) return;
   const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement;
 
   HostElementPrototype.insertAdjacentElement = function (

test/wdio/clone-node/cmp-root.tsx

@@ -0,0 +1,26 @@
+import { Component, Element, h } from '@stencil/core';
+
+@Component({
+  tag: 'clone-node-root',
+})
+export class CloneNodeRoot {
+  @Element() el!: HTMLElement;
+
+  cloneSlides() {
+    this.el.querySelectorAll('clone-node-slide').forEach((slide) => {
+      const clonedSlide = slide.cloneNode(true) as HTMLElement;
+      this.el.appendChild(clonedSlide);
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.cloneSlides.bind(this)}>Clone Slides</button>
+        <clone-node-slide>
+          <clone-node-text></clone-node-text>
+        </clone-node-slide>
+      </div>
+    );
+  }
+}

test/wdio/clone-node/cmp-slide.tsx

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'clone-node-slide',
+})
+export class CloneNodeSlide {
+  render() {
+    return (
+      <Host>
+        <p class="slide-content">Slide Content</p>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

test/wdio/clone-node/cmp-text.tsx

@@ -0,0 +1,14 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'clone-node-text',
+})
+export class CloneNodeText {
+  render() {
+    return (
+      <Host>
+        <p class="text-content">Clone Node Text</p>
+      </Host>
+    );
+  }
+}

test/wdio/clone-node/cmp.test.tsx

@@ -0,0 +1,47 @@
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+import { $, $$, browser, expect } from '@wdio/globals';
+
+describe('clone-node', () => {
+  before(async () => {
+    render({
+      components: [],
+      template: () => <clone-node-root></clone-node-root>,
+    });
+  });
+
+  it('should not duplicate nested component content when cloning', async () => {
+    await $('clone-node-root.hydrated').waitForExist();
+
+    // Initially should have 1 slide with 1 text component containing 1 paragraph
+    const initialTextElements = await $$('.text-content');
+    expect(initialTextElements).toHaveLength(1);
+
+    const initialSlideElements = await $$('.slide-content');
+    expect(initialSlideElements).toHaveLength(1);
+
+    // Click the button to clone the slide
+    const button = await $('button');
+    await button.click();
+
+    // Wait for the clone to be added
+    await browser.pause(100);
+
+    // After cloning, should have 2 slides with 2 text components
+    // Each text component should have exactly 1 paragraph (not duplicated)
+    const clonedTextElements = await $$('.text-content');
+    expect(clonedTextElements).toHaveLength(2);
+
+    const clonedSlideElements = await $$('.slide-content');
+    expect(clonedSlideElements).toHaveLength(2);
+
+    // Verify each text element has the correct content
+    for (const textEl of clonedTextElements) {
+      await expect(textEl).toHaveText('Clone Node Text');
+    }
+
+    for (const slideEl of clonedSlideElements) {
+      await expect(slideEl).toHaveText('Slide Content');
+    }
+  });
+});