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

Question

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

我正在使用 ionic 4，它创建具有特定样式的 shadow DOM 元素。 我有以下几点：

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

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

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

如果变量不可用，有没有办法使用 CSS 覆盖 shadow 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