Ionic-framework: Color broken in inner components inside shadow-dom

[manucorporat]

badgeColor in ion-tab does not work because ion-tab-button lives inside the shadow-dom of ion-tabs which prevents it from accessing the colors.css global styles

[peterennis]

@brandyscarney @manucorporat
Ref: #14830
Updated to core 10.9/4.0.0-alpha.13
Spinner color still not working.
Badge colors not working.
Animation OK.
Paused working.
https://aesvg.adaept.com/
https://github.com/peterennis/ae-svg-components/commit/ec88c41e7475e0a357a499c2ec3b2719ae2d0865

[dtaalbers]

+1

[corysmc]

+1 here's an example in a tabs application with badges. Primary/default color works, but not danger secondary, etc.
https://codepen.io/corysmc/pen/NLdNMj

[ionut-movila]

Still not working, in beta 7, I can confirm.

[goelectricstations]

same issue wiht beta 11

[corysmc]

Issue still exist in beta.12:
https://codepen.io/corysmc/pen/LgPPRb?editors=1010

[corysmc]

Still broken beta.13 https://codepen.io/corysmc/pen/LgPPRb

[corysmc]

Fixed in beta.15
https://codepen.io/corysmc/pen/RqwwbX?editors=1010

[manucorporat]

This is fundamentally a problem with shadow-dom, so we recommend to avoid using native shadow-dom for user's components that use ionic, otherwise color is likely to break.

For ion-tabs, we refactored it, so it's possible to customize. Closing!

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