Tip

Use Native CSS Parts to Access the Shadow DOM in an Ionic Component

Working with the Shadow DOM can be tricky as it scopes styles so normal CSS classes can't target the elements within. In this tip you'll learn a few approaches to styling elements that are within the Shadow DOM.

Changing the default styles of Ionic components can be a bit tricky since the components all use the shadow DOM, meaning we can't write CSS that targets the components inside the shadow DOM directly.

Ionic has custom CSS variables in each component that allows us a lot of customization, and when those aren't enough, they expose CSS parts of the underlying HTML elements that form Ionic components.

For the case of a button you can target the underlying HTML <button> tag:

ion-button {
  &::part(native) {
    // This CSS affects the <button> tag.
  }
}