通过CSS更新shadow dom中设置的样式

Question

这个问题适用于 Ionic，但它的答案可以更普遍地适用于 CSS。我不知道。

我使用 ionic 4 创建具有特定样式的影子 DOM 元素。我有以下内容：

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

我希望“浮动标签”文本在浮动时比平时更向左移动。我可以使用标签本身的样式轻松地做到这一点。

然而，在其下创建的 Shadow DOM divion-item有自己的样式，其中包括overflow: hidden. 我还没有找到从样式表更新这些样式的方法。我尝试过使用/deep/和各种其他选择器，但这些似乎不起作用，并且对它们的支持似乎也被删除了。我知道您可以使用 CSS 变量，但这个特定属性overflow不是由变量设置的。我还知道您可以使用 DOM 将样式注入到影子 DOM 中，但我想避免这样做，因为我必须在每个组件中的某个地方执行此操作，而不是能够在整个应用程序中执行一次。

如果变量不可用，是否有任何方法可以使用 CSS 覆盖影子 DOM 中设置的样式？

Answer 1

您应该尝试使用 ng-deep 选择器直接操作 DOM 元素样式。

::ng-deep {
 .your-class { // Used to contain your deep change to a localized node
    your style
}

角度指南：https://angular.io/guide/component-styles