bug: user styles are not overriding scoped components

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
• buttons
• card
• input
• label
• loading
• modal
• picker
• popover
• searchbar
• segment
• select-popover
• textarea

[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.

[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.