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

【问题标题】：Update styles set in shadow dom via CSS通过 CSS 更新 shadow dom 中设置的样式
【发布时间】：2019-03-29 08:14:57
【问题描述】：

这个问题适用于 Ionic，但它的答案可能更普遍地适用于 CSS。我不确定。

我正在使用 ionic 4 创建具有特定样式的阴影 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 将样式注入到影子 DOM 中，但我想避免这样做，因为我必须在每个组件的某个地方执行此操作，而不是在整个应用程序中执行一次。

如果变量不可用，有没有办法使用 CSS 覆盖阴影 DOM 中设置的样式？

【问题讨论】：

您是否尝试过使用:host css 选择器？我可以确认 /deep/ 和 .cla >>> elem 方法在他们弃用之前曾经有效。

标签： javascript css angular ionic-framework shadow-dom

【解决方案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

【讨论】：

来自您链接的文档" 不推荐使用穿透阴影的后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划 放弃对 Angular 的支持（适用于所有 3 个 /deep/、>>> 和 ::ng-deep）。在此之前，应该首选 ::ng-deep，以便与工具更广泛地兼容。
是的，但这种情况已经 1 年多了，仍然没有更新，所以它仍然是最好的用例 :)
@Zze 还有其他选择吗？