Global styles overriding parent app styles

[fongsean]

Hi team, I noticed that LForms is overriding styles in the parent app during dark mode testing.

We received a global style override issue for CSIRO smart-forms aehrc/smart-forms#1492 - that's what prompted me to test dark mode and found out LForms might have a similar issue. See screenshots below.

This ticket is more of a heads up - zero urgency.

LForms component is commented out:

LForms component is present: (Dark mode is still on)

Light theme for comparison, LForms present

[lhcye]

Thanks Sean. We will take a look and have it fixed in a future version.

[dietergeerts]

I also see this. When looking into why, I see that the underlying ng-zorro adds global reset styling:

However, I don't expect a web component to include global styling, as a web component is meant to be used on its own in whatever app or website you place it. I understand the global reset if you build your app on top of ng-zorro, but not for this. So probably, there needs to be some containment happening, like a parent class or css layers?

We're using the lforms webcomponent from the npm package and load in the styling and scripts through the angular build options like this:

Maybe we have other options that can avoid these global styles?

[dietergeerts]

For anyone else wanting a workaround, you can do the following to have the styles loaded, but only for your Angular wrapper component:

[lhcye]

Thanks for reporting this issue and also providing a solution. We had a task to fix the problem but didn't complete it as we found other issues at the time. One thing is that we still want to make the internal styles of LHC-Forms widget customizable by users. We will prioritize this task. Thanks!

[lhcye]

The change is in v43.0.0.