The Ionic Framework recently adopted an upcoming W3C specification titled CSS Shadow Parts that simplifies component theming and modification.
Starting with Ionic Framework 4, the core components of the framework have been rewritten as Web Components. The switch enabled Ionic to share their components across multiple JavaScript frameworks (Angular, React, Vue.js, and native JavaScript) but had the unwanted side effect of limiting the way these components could be modified by developers.
By using Shadow DOM, Web Components prevent CSS styles from leaking out from or into the components. While the advantage of preventing imported components from effecting the global CSS is clear, it prevents the developer from making CSS customizations and adapting the imported Web Components to the application theme.
To help developers face this limitation, Ionic adopted a set of CSS custom properties that are used across all of its components. This means that while developers can't directly modify the CSS styles of the Web Components, as these styles are wrapped within the Shadow DOM, they could instead change the CSS property values that were passed in.
While this solution worked for simple use cases, it was difficult to expose all of the included designs via CSS properties, leaving some aspects of the components completely locked while also unnecessarily increasing the CSS file sizes.
To address this limitation, Ionic has now adopted CSS Shadow Parts, a new specification that was originally released at the end of 2018 and has finally landed in all major browsers, allowing Ionic to integrate it with their framework.
As its name implies, CSS Shadow Parts defines a new HTML property called 'part' that identifies portions of the shadow DOM that should be accessible for external manipulation. For example, this is how the updated ion-select component looks like:
<ion-select>
#shadow-root
<div part=”placeholder” class=”select-text select-placeholder”></div>
<div part=”icon” class=”select-icon”></div>
</ion-select>
With the new tags in place, developers can take advantage of the exposed CSS shadow parts by using the new ::part CSS pseudo-element, which represents an element within a shadow tree that has a matching part attribute.
Following the previous example, in order to modify the placeholder part defined above a developer could use the following CSS:
ion-select::part(placeholder) {
color: red;
min-width: 100px;
}
The new selector does work with pseudo-elements and pseudo-classes, though some limitations still apply.
Head out to the Ionic blog for a complete list of supported components and exposed parts.
Ionic is an open-source project and is licensed under the MIT license. Contributions and feedback are encouraged via the Ionic GitHub project and should follow the Ionic contribution guidelines and code of conduct.