I am trying to style Ionic Framework's toast control. I am still learning about HTML shadow roots and templates and parts. But, as far as I have understood, it seems Ionic is using HTML templates and slots.

Now, the ion-toast element has a CSS Shadow Part called message. If I write following css, it will make the whole message element of the toast to have red background, proving the ::part css selector works.

ion-toast::part(message) {
    background-color: red;
}

What I am trying to do is color the links inside the message part. How I assume the css should work in this case is:

ion-toast::part(message) a {
  color: red;
}

But, the links are not colored. The descendant selector on parts does not seem to work. How can I target the descendants of a part in css?

This selector ion-toast::part(message)::first-letter colors the first letter of the message. So, pseudo-selectors seem to work.