Update styles set in shadow dom via CSS

Question

This question applies to Ionic, but its answer could apply more generally to CSS. I'm not sure.

I'm using ionic 4 which creates shadow DOM elements that have specific styles. I have the following:

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

I want the "Floating Label" text to move further to the left than usual when it's floating. I can do this pretty easily with styles on the label itself.

However, the shadow DOM divs created under ion-item have their own styles that include overflow: hidden . I have not found a way to update these styles from my stylesheet. I've tried using /deep/ and various other selectors, but these do not seem to work and support for them also seems to be removed. I understand that you can use CSS variables, but this particular property overflow is not set by a variable. I also understand that you can use the DOM to inject styles into the shadow DOM, but I want to avoid doing this since I would have to do it somewhere in every component rather than being able to do it once across the app.

Is there any way to override styles set in a shadow DOM using CSS if variables are not available?

Answer 1

You should try using the ng-deep selector to manipulate DOM elements style directly.

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

Angular guidelines : https://angular.io/guide/component-styles