Select "toolbar-title" within shadow root of ion-title via css

Issue

In Ionic, the ion-title component has the content encapsulated in an extra div within its shadow-dom.
This div has the class .toolbar-title set. How can i select this div via scss-selector to change its overflow behavior?

I tried:

.toolbar-title { ... }
ion-title .toolbar-title
ion-title::shadow .toolbar-title { ... }
ion-title::shadow(div) { ... }

and a lot other combinations including :host & ::ng-deep selectors.

And, yes i know , ::shadow and ng-deep is deprectaded.

I also know that ionic has introduced css-variables for this purposes, but unfortunatley not for the overflow attribute.

THX in advance!

Solution

The concept of shadowDOM is you can’t touch its content with CSS from the outside.

It is an open shadowDOM, so you can change it with JavaScript.

document.querySelector("ion-title")
        .shadowRoot
        .querySelector(".toolbar-title")
        .style
        .overflow = "initial";

Answered By – Danny '365CSI' Engelman

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0