How can i style a shadow DOM in Ionic 4

Ionic Framework
1

44

I wish to style the <ion-tab-button>

2 Likes
2

This article might be helpful:

1 Like
3

Still not helpful. I have tried several solutions but still not working

4

Focus on the key points from the article:

Key points:

You cannot style any of the internal elements of a web component from outside of the web component using CSS selectors
You can style the internal elements of a web component if CSS4 variables are being used, as you can change the values of the CSS4 variables.
You can style slotted content inside of a web component (i.e. content you have supplied to the web component) from outside of the web component
You can style the host element of the web component (i.e. the element you use to add the web component to a page) from outside of the web component

There isn’t much more to it than that - if you want to style something inside of a Shadow DOM (that isn’t slotted content) then you have to change the values of CSS4 variables that the component is using. I don’t think the docs have the CSS4 variables being used in each component yet, but if you open the debugger and inspect the elements as you have in that screenshot you will be able to see the CSS4 variables being used. Then just overwrite them, i.e:

ion-tabs {
  --color-selected: red;
}
5 Likes
5

I mean I wanted to style the <ion-tab-button> not the <ion-tabs>. I tried your solution but not working. I need help urgently

6

I need to change the sidemenu width but i can’t do it because there are not css4 variable setting it and the pseudo-selectors ::shadow and /deep/ are not working. How can we style sidemenu width (the element inside the shadow DOM I need to style is .menu-inner)?

1 Like
7 
ion-menu ion-content {
   background: red;
}

still does work no?

8

Yes, I’ve changed my question because I thought that was happening the same as with the width.
I need to change the width of the .menu-inner inside the shadow DOM

1 Like
9

this Shadow DOM is becoming a problem to us. I have been working on target an element or class in the html buh still not working for more than a week now. Am stuck now.

I have tried all solutions to make it work buh nothing changes. I guess they have to do something about it

1 Like
10

If after a couple of hours you were unable to solve a styling issue and you notice that there isn’t any other way than styling inside the shadow element, I guess you could open a feature/bug request on Github to add an additional variable to the shadow element

If you have time to provide straight the PR it’s even better

I think the Ionic team would be happy to add more variables, I mean they already added one to the button for one of my business case

11

In that case I think you can open the issue to ionic github

12

Before styling I recommend you set ViewEncapsulation to none in your component.ts.

13

The best option is to downgrade the ionic cli to 3.9.2
I have done that and it works pretty well.
Guess you think you also think of that too.

1 Like
14

I haven’t tried it yet, but maybe this will help:

2 Likes
15

You Can use this:

ion-tabs > ion-tab-button {
 .........
}

It’s Working for me.

16

How can I style scrollbars in Ionic 4 components?

17

Can you explain this?

18

Take a look on this video

Summary:
U can’t style DOM like u did in ionic3.

4 Likes
19

tested, it works! :+1:

20

Use it in global.scss