<h3 dir="auto">Version</h3>
<p dir="auto">2.3.3</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="http://plnkr.co/edit/AiNse4SDOQIiH1RlnKoE?p=preview" rel="nofollow">http://plnkr.co/edit/AiNse4SDOQIiH1RlnKoE?p=preview</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Make a Polymer element in a separate file</li>
<li>Import the Polymer element into a main page that makes a new instance of Vue</li>
<li>Run the page in different browsers (particularly, Chrome and one other), notice the number of alert boxes, as well as the Render Order count, in different browsers.</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">At the end of the page loading, every Polymer element should only have one copy of the template DOM structure within the custom element (same for Shadow DOM or Shady DOM)</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">In Chrome, regardless of which version of Polymer and which DOM structure used, the template structure was rendered <em>twice</em>. This problem is particular visible when using Shady DOM in Polymer v1, which will actually display the element structure twice.</p>
<hr>
<p dir="auto">I have traced the Vue code, and identified that the trigger is the call to document.createElement('tag'). For FireFox, IE and Edge, this call (in this example) goes into polyfill, which definitely has different behavior when comparing to the native function inside Chrome.</p>
<p dir="auto">It looks like, at the point of , Chrome has already created the template structure, and then later on when Vue starts to attach the bindings, it loops through the entire template structure within the Polymer element, and calls document.createElement once every inner element within the template. This may be one of the possible causes making the whole DOM repeated.</p>
<p dir="auto">This is particularly visible when using Polymer v1 with Shady DOM, which makes users actually see the duplicated elements; for other combinations (either using Shadow DOM or using Polymer v2), the repeated structure would seem to be removed from DOM. Yet, by noticing the alert box I have hooked up in the example, it is clear that the element got created twice each time it is used. In the example I provided, if you add a line saying &lt;script&gt;Polymer={dom:'shadow'}&lt;/script&gt;, it will force Polymer v1 to use Shadow DOM. At that moment, the repeating DOM will disappear, but the alert box still comes up 4 times instead of 2, and Render Order # definitely shows the artifact.</p>
<p dir="auto">The reason I posted the behavior here in the Vue project is that, IMO, looping through the inner template structure within the Polymer element, and calling document.createElement to every single inner element, may not be the optimal way; yet, to be honest, I am merely tracing and describing as much observation I have made as possible. I am not a UI professional, and I am happy to leave this issue to your judgment. Thank you very much for your attention.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.21</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/anon/pen/gZGPPL" rel="nofollow">https://codepen.io/anon/pen/gZGPPL</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">1.change the components order<br>
2.console.log the $children</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">should change the $children order corretly</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">$children order not changed</p>