通过css在ion-title的卷影根目录中选择"toolbar-title“

Question

在Ionic中，ion-title组件将内容封装在其shadow-dom中的额外div中。这个div设置了类.toolbar-title。如何通过scss-selector选择此div来更改其溢出行为？

​

​

我试过了：

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

还有很多其他的组合，包括:host & ::ng-deep选择器。

而且，是的，我知道，::shadow和ng-deep已被弃用。

我也知道ionic为此引入了css变量，但不幸的是不是为了overflow属性。

提前谢谢你！

Answer 1

shadowDOM的概念是你不能从外部接触它的内容。

它是一个open shadowDOM，所以你可以用JavaScript修改它。

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