Select "toolbar-title" 在 ion-title 的影子根中通过 css

Question

在 Ionic 中，ion-title 组件将内容封装在其阴影 dom 中的额外 div 中。此 div 具有 class .toolbar-title 集。我如何 select 通过 scss-select 这个 div 或改变它的溢出行为？

我试过了：

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

以及许多其他组合，包括 :host & ::ng-deep selectors.

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

我也知道 ionic 为此目的引入了 css 变量，但不幸的是，溢出属性没有。

提前致谢！

Answer 1

shadowDOM 的概念是您不能从外部用 CSS 触摸它的内容。

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

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

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