Search code examples
cssangularionic-frameworksassshadow-dom

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

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?

enter image description here

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";