Prop values are different at constructor on first and second rendering of component (at a Angular app)

[danyball]

Stencil version:

 @stencil/[email protected] 

I'm submitting a:

[x] bug report

Current behavior: This is not an isolated stencil bug. I want do inform you about a strange behavior:

If i run my code for the 1. time, stencil lazy loads my webcomponent. Then i remove the component from dom (using *ngIf) and add it again. The value of a prop at the component's constructor is different on 1. and 2. run. Which is a problem for me. But i dont want to discuss this specific problem. I want do discuss why the prop's value is different.

Expected behavior: The value of a prop at the constructor is always the same. No matter if the module is lazy-loaded before or not.

Steps to reproduce: Setup:

• Angular 11
• uses a Stencil custom element ("sdx-input")

Pls have a look at this codesandbox.

You can see a button and a datepicker. If you click toggle, datepicker is gone. Click again on toggle to show it. And on the second click you can see an error at the console. This error is only the effect, not the cause.

The cause is:

Related code:

src/runtime/initialize-component.ts:

if (Cstr.then) {

This if is true if the component is lazy loaded right before. And false on the 2. run.

My problem: At a angular app this is Promise is a ZoneAwarePromise, which wraps the Promise you have created at loadModule(). And it runs at Cstr = await Cstr;. And the ZoneAwarePromise is doing data binding internally, which sets the prop flatpickrOptions of my component before the constructur runs.

The problem is that this await Cstr is only executed on the 1. run of rendering. And because of data binding we have two different prop values on 1. and 2. rendering run.

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

Can you share the definition code for the sdx-input custom element? Feels like something happening in the authorship side of your web component. Our lifecycle methods seem to be working as expected.

[danyball]

Hi @splitinfinities - sure, here is my complete reproduction at a sandbox:

1. open https://codesandbox.io/s/nice-tree-rxkx8?file=/src/stencildist/my-component.entry.js (you can see the un-minified version at the comment below the code)
2. open the console
3. You can see the log constructor of stencil component: @Prop last: this comes from angular model
4. click toggle 2 times
5. You can see a different log constructor of stencil component: @Prop last: Stencil default value