-
Notifications
You must be signed in to change notification settings - Fork 778
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: hydrated flag doesn't work for dist-custom-elements build #3437
Comments
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! |
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 |
@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. |
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. |
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 |
For more complex components, like one that we have in our project with tons of content the page loads in the following sequence:
|
On of our projects historically uses parcel, and |
We encountered this as well. In case it helps, here's another repro case closer to our setup. |
@jcfranco thanks for the additional reproduction, I'll mark this for further discussion and prioritization. |
Any update about the prioritization ? Facing the same issue and use pre-hydration style for most of my library. |
Hi @rwaskiewicz , is there any progress on this issue? |
Prerequisites
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 fromdist
output target and generaldist-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
The text was updated successfully, but these errors were encountered: