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.

3 Likes

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

How do we disable the shadow dom thing?
This is so annoying and stupid! Why cant we just make/use simple CSS selectors and style the elements?

This is so unproductive!

1 Like

If you’re using Ionic components that use a Shadow DOM then you can’t turn it off, it would require Ionic publishing those components without Shadow DOM (which is possible, but for the time being at least, they have decided to make use of Shadow DOM).

You aren’t alone in your frustration, but there is a purpose to it. To give a simple example, from Ionic’s perspective they are deciding between two alternatives:

  1. Use Shadow DOM and ensure that when they push updates to their components in the future it won’t break people’s applications. Also, they can be sure that existing code (scripts or styles) in the developers application won’t interfere with the web components functionality. The downside is the components are less flexible and developers may be annoyed that they can’t style them in any way they want (only ways that Ionic explicitly allows though CSS variables)

  2. Don’t use Shadow DOM and developers can style the components however they please. The downside of this approach is that when they update the components in the future it may break people’s existing applications (because the style modifications made don’t match up with the new component architecture/style).

Either way, people are going to get annoyed at some point. Personally, I like the Shadow DOM approach because you are essentially “feeling the pain” upfront rather than having to deal with your application being broken later.

1 Like

Yeah, so I spent 2 entire days banging my head solving all kinds of things to migrate from v3 to v4 to end up discarding everything because I can’t simply style my own HTML because its inside a ion-content that creates a shadow dom…

2 days wasted that I could be making money, or relaxing with my family… :rage: :rage: :rage:

Also, using shadow dom or not stuff will always break. so I oppose this change 100%!

2 Likes

To clarify for anyone else following this thread, you can style elements that you put inside of Ionic components (even if that Ionic component uses a Shadow DOM) however you like. It is just the internal structure of the Ionic components themselves that you can’t modify.

For example, with this code:

<ion-component-with-shadow-dom>
    <my-element></my-element>
</ion-component-with-shadow-dom>

You will be able to style <my-element> however you want even though it is inside of an element that uses Shadow DOM (it is nested within the element, but <my-element> is not inside of the Shadow DOM of that element). It is just the “hidden” internal structure of the Ionic component that you can’t freely modify.

1 Like

The problem is that the same ionic 4 app ported from ionic 3 is like hell slow. It’s just waits 3-400ms’ before navigating from one page to another on an android device. And there is an entire thread for it and ionic team just gives a shit. Instead of relasing unuseable features just fix fundamental issues please.

It is like a nightmare! I do not believe that Ionic Team took this decision, I believe that the Google and Apple companies took this decision of shadow DOM, that we are not going to use Hybrids app like Ionic anymore!!! Nightmare!