bug: user styles are not overriding scoped components

[brandyscarney]

Bug Report

Ionic version: 4.x

Current behavior:
Try to override a card using the following:

ion-card {
  font-size: 40px;
}

See that nothing changes

Expected behavior:
User styles should take precedence over scoped styles, I believe this used to work. Now we have to write the following:

ion-card {
  font-size: 40px !important;
}

We shouldn't have to use !important to override Ionic styles.

Steps to reproduce:
See the following Codepen: https://codepen.io/brandyscarney/pen/xMpqgG

Remove the !importants.

Ionic info:

Ionic 4.0.1

Here's a full list of scoped components affected:

• action-sheet
• alert
  - back-button (converted to use Shadow DOM)
• buttons
  - card (converted to use Shadow DOM)
• input
• label
• loading
  - modal (converted to use Shadow DOM)
• picker
  - popover (converted to use Shadow DOM)
• searchbar
  - segment (converted to use Shadow DOM)
• select-popover
• textarea

[brandyscarney]

Update: this is currently being worked on in Stencil

[lincolnthree]

Is this possibly related to: #17685 ? I've seen a number of these issues come up.

[brandyscarney]

@lincolnthree The content component is a shadow component so this doesn't apply to it. The problem there seems to be that the inner scroll div gets the scrollbar so we would need to expose CSS variables or move the scrollbar up a level. 🙂

[lincolnthree]

I see, that makes some sense. I'm still trying to wrap my head around the shadow dom, and why styles can sometimes penetrate the boundary and sometimes cannot. Thanks.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!

[infacto]

This also happens with Ionic build in css utilities. Please see this issue: #22266 Here you can see two demos of a minimal Ionic setup. The first demo does not work, the second one works. Why? 😕 In both demos, I doing the same stuff. The only difference is the project setup of Angular multi-app. It's weird, I cannot explain the reason. Any guess will help. Do you have an idea. I would be very pleased about any hint.
Update: You'll see a solution in this issue.

[liamdebeasi]

Hi everyone,

I spoke with the team, and we have decided to close this issue as "Resolved". Some of our components use scoped styles so that the component styles do not interfere with your global application styles. The tradeoff here is that customizing the internal styles of these components requires using CSS with a higher specificity than what we are using internally. This is the intended behavior of scoped components.

What we've done since this issue was opened

1. Updated component documentation to show how to customize scoped components

Our recommendation is to target a component based on a custom class. In most cases this should provide a higher specificity than what we have internally.

Example: https://ionicframework.com/docs/api/action-sheet#theming

2. Migrated some of the impacted components to use the Shadow DOM

The Shadow DOM does not have this problem because the styles are not scoped. This means that ion-back-button, ion-card, ion-modal, ion-popover, and ion-segment are no longer impacted by this behavior.

---

A note for Angular developers

If your Angular components are using Scoped Encapsulation then you may need to take additional steps to customize the internals of Ionic components.

Consider the following selector:

ion-input.custom-class .native-input {
  background: green;
}

Angular will scope each part of this selector to look something like this:

ion-input.custom-class[_ngcontent-ng-c2209613554] .native-input[_ngcontent-ng-c2209613554] {
  background: green;
}

However, the .native-input element is rendered outside of Angular (since Stencil renders it), so .native-input never receives the _ngcontent-ng-c2209613554 attribute in the DOM. As a result, your styles will not apply even if you use !important.

If you are using Angular scoped encapsulation and you need to customize deep inside an Ionic scoped component, we recommend moving these styles to a global stylesheet to prevent your selector from being processed incorrectly.

---

I am going to close this, but let me know if there are any questions. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.