feat: don't hydrate class name in html tag anymore

[christian-bromann]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Currently Stencil sets a hydrate class name on the html tag do avoid flicker effects in Ionic applications. Ionic uses the following style to enable it:

html:not(.hydrated) body {
  display: none;
}

The problem with this approach is that Next.js applications throw an error as they interpret this as an unintentional.

Describe the Use Case

Especially when components are lazy loaded we have to ensure that applications can load smoothly.

Describe Preferred Solution

We should not block the application from being visible just because there are some Stencil components that take longer to load. I think the best approach here is to just remove this behavior from the appDidLoad function. However this may have an impact on the Ionic project which we need to evaluate.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[danielleroux]

Would be a config flag a acceptable solution for this? In this case ionic can keep the default behaviour and all other projects can configure the components?

[christian-bromann]

@danielleroux I am currently looking into this and have a fix hopefully by next week. We likely will disable this for output targets.