Cloning the element duplicates the content of a component in certain conditions #1070
Description
Stencil version:
@stencil/core@0.12.4
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:
When a component is not using shadow dom, JQuery.clone() creates a component with the content duplicated (the content appears twice). The issue does not exists when Shadow DOM is true, or with the regular DOM cloneNode()
Expected behavior:
The content should not be duplicated
Steps to reproduce:
- Create a new Stencil project using the component starter project (https://github.com/ionic-team/stencil-component-starter).
- Replace index.html with the code bellow
- The page shows 2 buttons: "DOM Clone" & "JQuery Clone". A click on each of them properly clones the component
- edit my-component.tsx and set shadow to false
- Now the "JQuery Clone" creates a component with its content added twice while "DOM Clone" still works as it should.
Even the bug is specific to JQuery.clone(), it might reveal a sequence of events that is not properly handled by the Stencil runtime and leads to this duplicated body.
Related code:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>JQuery Clone Issue</title>
<script src="/build/mycomponent.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<h3>Original component</h3>
<my-component id="component" first="Stencil" last="'Don't call me a framework' JS"></my-component>
<br/>
<button id="button1" onclick="cloneComponent()">DOM Clone</button>
<button id="button2">jQuery Clone</button>
<h3>Cloned component</h3>
<br/>
<div id="container">
</div>
<script>
function cloneComponent() {
var c = document.getElementById("component");
var nc = c.cloneNode();
document.getElementById("container").append(nc);
}
$("#button2").click( function() {
var c = $("#component")
var cl = c.clone()
$("#container").append(cl);
});
</script>
</body>
</html>
Other information: