How disable the Shadow DOM in Ionic 4?

It is possible to disable the encapsulation of the style for the components of IONIC or the known “shadow DOM”

No. The components have been rewritten as web components, and use the shadow dom to manage the basic styling. The documentation outline various CSS variable you can set. Some items are not set within the component, so they can be set in a traditional fashion. If there is a element that you can not adjust, let the team know and they might be able to expose it in a new build

I have built multiple apps for multiple clients using Ionic, and I’ve never been this frustrated doing something as simple as styling a button. I should let you and the team know that this “let the team know” that seems to be the default answer I’ve seen everywhere on the internet would flat out not work. If a developer is doing something mission critical (my current case), and has to deliver something urgently, he/she would have to “let the team know”, then resign to fate until whenever the team deems it fit to provide a solution. It just would not work. There has to be a way to completely disable shadow dom/web components and style as is expected until the team can cover all use cases (which is not possible anyway).
I am only not using Ionic 3.9 for this project because of an issue with iPhone X where the navbar goes behind the notch. Submitted a bug report and was told it has been fixed in v4. Now one has to face issues that are normally easy to fix for no significant benefits whatsoever.

1 Like

Yah this is pretty annoying for me too. I have a lot of component templates within component templates and is really making the styling not compatible with the flexbox design. I thought adjusting the component encapsulation would so something, but that didn’t seem to work… If anyone finds anything, please let me know…

1 Like