Hydrate renders component twice

[patrickhaug]

Stencil version:

 @stencil/core@1.12.0

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:
I cloned the ionic repo and made another stencil component "test-comp" with this render:

<ion-card>
<ion-card-title>{this.name}</ion-card-title>
</ion-card>

and generated the build including hydrate script.

Then I am using it like so:

<ion-grid>
<ion-row>
<ion-col>
<test-comp name="test"></test-comp>
</ion-col>
</ion-row>
</ion-grid>

Generated markup with hydrate script seems correct but when client takes over eveything in test-comp is duplicated. I see this behaviour as soon as a web component is referenced in another web-component in /src.

Expected behavior:
Everything is rendered only once also when another web component from bundle is referenced in the component.

Steps to reproduce:
Add custom coponent and reference components from bundle and generate hydrate script.

[patrickhaug]

When I turn of the option clientHydrateAnnotations (which does not exist in renderToString based on documentation) it’s fixed. But I assume I lose a lot of other stuff ?

[patrickhaug]

Would be cool if someone just gives a quick heads up if what I am doing is just wrong or point me into the right direction so I can dig deeper in the code.. thx

[peterpeterparker]

Just gonna link my issue here as it seems similar: #2366

[peterpeterparker]

@patrickhaug a PR solving #2366 which might be similar to your issue has been merged and included in v1.15.0-4