Ionic-framework: Revisit all components for styling and shadow

[brandyscarney]

Components

We have several components that are not shadow. Scoped components cause problems when it comes to being able to easily style them, see related issues below. We need to revisit them for the next major release. Since changing a component from scoped -> shadow would potentially be a breaking change for anyone targeting inner styles or the styles using scoped, this needs to be done for a major release.

Here's a full list of the components and their types:

Key
:ghost: - shadow
:mag: - scoped

| Component | Type |
| ----------------------------| ------------|
| action-sheet | :mag: |
| alert | :mag: |
| anchor | :ghost: |
| app | |
| avatar | :ghost: |
| back-button | :mag: |
| backdrop | :ghost: |
| badge | :ghost: |
| button | :ghost: |
| buttons | :mag: |
| card-content | |
| card-header | :ghost: |
| card-subtitle | :ghost: |
| card-title | :ghost: |
| card | :mag: |
| checkbox | :ghost: |
| chip | :ghost: |
| col | :ghost: |
| content | :ghost: |
| datetime | :ghost: |
| fab-button | :ghost: |
| fab-list | :ghost: |
| fab | :ghost: |
| footer | |
| grid | :ghost: |
| header | |
| icon | :ghost: |
| img | :ghost: |
| infinite-scroll | |
| infinite-scroll-content | |
| input | :mag: |
| item-divider | :ghost: |
| item-option | :ghost: |
| item-options | |
| item-sliding | |
| item | :ghost: |
| item-group | |
| label | :mag: |
| list | |
| list-header | :ghost: |
| loading | :mag: |
| menu-button | :ghost: |
| menu-toggle | :ghost: |
| menu | :ghost: |
| modal | :mag: |
| note | :ghost: |
| picker | :mag: |
| picker-column | |
| popover | :mag: |
| progress-bar | :ghost: |
| radio-group | |
| radio | :ghost: |
| range | :ghost: |
| refresher | |
| refresher-content | |
| reorder-group | |
| reorder | :ghost: |
| ripple-effect | :ghost: |
| row | :ghost: |
| searchbar | :mag: |
| segment-button | :ghost: |
| segment | :mag: |
| select-option | :ghost: |
| select-popover | :mag: |
| select | :ghost: |
| skeleton-text | :ghost: |
| slide | |
| slides | :ghost: |
| spinner | :ghost: |
| split-pane | |
| tab-bar | :ghost: |
| tab-button | :ghost: |
| text | :ghost: |
| textarea | :mag: |
| thumbnail | :ghost: |
| title | :ghost: |
| toast | :ghost: |
| toggle | :ghost: |
| toolbar | :ghost: |

Related Issues

• 📝 Document the different component types: https://github.com/ionic-team/ionic-docs/issues/591
• 📝 Documentation is poor surrounding styling different components: https://github.com/ionic-team/ionic-docs/issues/587
• 🐛 User styles are not overriding scoped components: https://github.com/ionic-team/ionic/issues/17425
• 🐛 UI Components are not customizable enough https://github.com/ionic-team/ionic/issues/17166

Potential Fixes

::part

Investigate if there is a way to use the ::part syntax.

Convert to shadow

Look into if there is a way to convert scoped components to shadow, and include more CSS variables.

[rricamar]

Hi @brandyscarney , I found this issue and I want to ask you, while you are doing the revision, exists some way of styling components with shadow DOM? We're doing the migration from V3 to V4 and our previous toast was very custom and I don't find a way of doing this ... 😢 [maybe inheritance changing shadow to false] ?

Thanks in advance for your help 🙏

[brandyscarney]

Hey @rricamar, sorry I missed this! There are CSS variables exposed that allow for some customization: https://ionicframework.com/docs/api/toast#css-custom-properties

Here's a Codepen example: https://codepen.io/brandyscarney/pen/mddzdLb

More info on CSS variables: https://ionicframework.com/docs/theming/css-variables

Soon we will be able to take advantage of CSS parts which will make styling shadow children even easier.

If there are missing CSS variables or something that you are not able to do please create a new issue! Thank you!

[brandyscarney]

Components that have been updated:

| Component |
| ----------------------------|
|back-button https://github.com/ionic-team/ionic/pull/19411 |
| card https://github.com/ionic-team/ionic/pull/19395 |
| segment https://github.com/ionic-team/ionic/pull/19036 |
| split-pane https://github.com/ionic-team/ionic/pull/19754 |

Components that will remain non-scoped/non-shadow for now:

| Component |
| ----------------------------|
| app |
| card-content |
| footer |
| header |
| infinite-scroll |
| infinite-scroll-content |
| item-options |
| item-sliding |
| item-group |
| list |
| picker-column |
| radio-group |
| refresher |
| refresher-content |
| reorder-group |
| slide |
| split-pane |

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