bug: hydrated flag doesn't work for dist-custom-elements build

[MaksimShakavin]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.11.0

Current Behavior

.hydrated class is not been added to component if I usedist-custom-elements bundle. Because of this I can see component flickering without styles while loading. And also I have some logic in componentDidLoad that rely on some dom elements width. It works from time to time depending on when styles are applied. With dist output everything works as expected.

Expected Behavior

.hydrated class is working for both lazy-loading from dist output target and general dist-custom-elements

Steps to Reproduce

Check out the reproduction repo. Run yarn install yarn build npx http-server packages/parcel-app/dist

Code Reproduction URL

https://github.com/MaksimShakavin/stencil-hydrated-bug

Additional Information

No response

[alicewriteswrongs]

Hi @MaksimShakavin I am able to build and run your reproduction repo, thanks for providing that! Could you share some more specific information about what is currently happening in that repo that you're expecting not to be the case? I can see a simple test component rendering but I don't see any flickering or anything like that. Thanks!

[MaksimShakavin]

Hi @alicewriteswrongs , thanks for looking into it. There is no flickering because component's styles are very simple. The key problem is that '.hydrated' class is not added to the component, if dist-custom-elements is used. Or is it expected and invisiblePrehydration only works for dist?

[alicewriteswrongs]

@MaksimShakavin I believe this may be a duplicate of #3319, does that issue look like it describes your issue accurately to you? If so, I'll close this in favor of that one since it is already prioritized and in our work backlog.

[MaksimShakavin]

Hi @alicewriteswrongs , it could be related but not exactly the same. In the bug above the problem is with hydration of pre-rendered html, not with invisiblePrehydration.

[MaksimShakavin]

Hi @alicewriteswrongs , I've pushed and update to the reproduction repo to show you the flash Of unstyled content, that I am facing. It appears that I can reproduce it only in firefox and only if I have nested web-components. In my example button-component is used inside my-component. And only for dist-custom-elements.

[MaksimShakavin]

For more complex components, like one that we have in our project with tons of content the page loads in the following sequence:

1. Blank page
2. Unstyled content
3. Blank page
4. Components with an applied styles

[MaksimShakavin]

On of our projects historically uses parcel, and dist doesn't work with it ,because of the issue described in https://github.com/ionic-team/stencil/issues/1882 . One of the solution is to use dist-custom-elements, but it doesn't work for us neither because of this bug.

[jcfranco]

We encountered this as well. In case it helps, here's another repro case closer to our setup.

[alicewriteswrongs]

@jcfranco thanks for the additional reproduction, I'll mark this for further discussion and prioritization.

[KevinCarnaille2]

Any update about the prioritization ? Facing the same issue and use pre-hydration style for most of my library. I can only use dist atm :)

[MaksimShakavin]

Hi @rwaskiewicz , is there any progress on this issue?