Ionic 4 Style changes for shadow elements

Ionic Framework
1

Hi all,

i have a general Question about Shadow Elements like the Ionic 4 Components.
I try to set multiple styles to some Ionic 4 Components but for some Components the CSS Variables like --border-bottom is missing, so i am unable to set the Border Bottom Style.

What i did as Workaround, i created these two functions:

async addShadowElementStyle(element: HTMLElement, style: any) {

        if (element.shadowRoot === null) {
            element.attachShadow({mode: 'open'});
        }

        const styleElement = document.createElement('style');
        styleElement.textContent = style;

        await element.shadowRoot.appendChild(styleElement);

    }

    async addShadowElementsStyle(querySelectorAll: string, style) {
        const elements: any = document.querySelectorAll(querySelectorAll);
        for (const e of elements) {

            this.addShadowElementStyle(e, style);
        }
    }

and apply my styles with this:

this.helper.addShadowElementsStyle('ion-item', ':host { border-bottom: 1px solid #eee }');

i really do not like this way. But is there a different way to apply custom css to some components?

Best,
Daniel

2

Yes and no I would say

Yes the only way is to use css4 variables which are exposed or use a workaround like you did

No there is another way, submit a PR to the Ionic team in order to add the missing CSS4 variables you would need

3

Does @danielmm1997’s idea above still work? I am trying to modify the font-size of the ion-icon used in the ion-menu-button,

I added his code but not sure what “helper” refers to.

I have this:

  ngOnInit() {
    this.addShadowElementsStyle('ion-icon', '{ font-size:40px; }');
  }

but it has no effect.

4

You have to add this two Helper Functions somewhere. Then you can use: addShadowElementsStyle

5

Yes, I had those 2 functions and it didn’t work.

Before I saw your answer i tried the approach of reporting it as a bug. At least for this specific case (ion-menu-button), the fix was added to 4.6.2. I am sure this will come up again though as Ionic 4 seems to hide many things from being styled… ughh!!