Official support for CSS Shadow Parts in Ionic Framework has landed! Shadow parts make it easier to theme and customize Ionic Framework components.

They replace the need for a large amount of CSS variables by adding the ability to target any CSS property on an element inside of a shadow tree.

Why Shadow Parts? 🤔

To better understand what shadow parts are, we need to understand why we need them. The release of Ionic Framework 4 at the beginning of last year migrated all of our components to become a distributed set of Web Components. Web Components follow the Shadow DOM specification in order to encapsulate styles and markup.

Shadow DOM is useful for preventing styles from leaking out of components and unintentionally applying to other elements. For example, we assign a .button class to our ion-button component. If an Ionic Framework user were to set the class .button on one of their own elements, it would inherit the Ionic button styles in past versions of the framework. Since ion-button is now a Shadow Web Component, this is no longer a problem.

However, due to this encapsulation, styles aren’t able to bleed into inner elements of a Shadow component either. This means that if a Shadow component renders elements inside of its shadow tree, a user isn’t able to target the inner element with their CSS

#all #engineering #css #ionic #shadow parts