Stencil: Components get duplicated when parent gets cloned

[Gbuomprisco]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

This bug is related to cloning an element, which was already discussed and fixed in this ticket (https://github.com/ionic-team/stencil/issues/1070).

This happens when using Drag&Drop within an Angular application, but I can reproduce easily by cloning the parent using cloneNode(true). It only happens with emulated scoping, not with native Shadow Dom. But I can't use the latter to support Safari.

I don't know the inner workings of Stencil, so apologies in advance if I'm reporting something obvious.

I can see two things happening:

• the components and its slots get duplicated and the inputs are missing (i.e. undefined)
• the slots are out of place

I also added "cloneNodeFix: true" to my Stencil configuration.

Here is an example if I clone the parent element:

Expected behavior:

I would assume the component would not be reinitialized and that the slots would render in the correct order

Steps to reproduce:

• Create a Stencil component with scoped: true and add some props
• Either use cloneNode(true) on the parent, or use my reproduction

Here's an image from my repository that reproduces the bug:

Related code:
I created a repo here for reproduction: https://github.com/Gbuomprisco/angular-dd-stencil-bug. It's an Angular project that implements D&D with Material and a Stencil component within.

The stencil project is under /src. Simply run npm run start.

Thanks to the team for the project and the hard work!

Other information:

[juliovedovatto]

Facing similar issue, but with another 3rd-lib that changed DOM.

I tried to force re-render without success. Stencil hard caches DOM or something.

• I created a function which returns a JSX structure
• When component will load, I set the returned value to a @State variable
• Call 3rd party lib, lib changes DOM
• When I try to update JSX (calling same function) into a @State variable (after all it is supposed to be reactive). But, when re-render occurs and JSX structure should be updated, Stencil renders a cached faulty version, without updates.

[Gbuomprisco]

Hi @juliovedovatto, yours is probably a separate issues.

You may want to check these out:

• https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes
• use "key" when looping

[ivanvotti]

I have the same issue when I clone a parent node to perform transition out animation. A Stencil component gets duplicated inside of that clone. The cloneNodeFix option doesn't work for me.

[nilssonja]

Just noticed the same thing today when an Angular consumer of our Stencil component library tried using Angular Material's Drag&Drop.

My overall assumption/explanation of the problem is that Drag&Drop is effectively duplicating the HTML structure to create a "preview" element that follows the mouse, as well as a "placeholder" element within the list. Since this is effectively creating new nodes in the DOM, the Stencil components contained in the newly created "preview" and "placeholder" elements are freshly initialized with the fully rendered contents of the Stencil components already passed in from the get go. Those contents effectively are just being rendered within the host element as-is, as if they were being slotted in/treated as children, alongside the newly generated nodes created by the Stencil component in it's first render.