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

Question

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

javascriptcssangularionic-frameworkshadow-dom

6

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

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

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

我希望“悬浮标签”文本在悬浮时比平常向左移动更远。我可以通过对标签本身使用样式轻松实现这一点。

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

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

- Explosion Pills

你尝试过使用:host CSS选择器吗？我可以确认/deep/和.cla >>> elem方法在被弃用之前曾经可行。 - Zze

你找到解决办法了吗？ - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Beugnet · Answer 1

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

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

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