Discussion for appearance customization

[jackbsteinberg]

Open discussion for figuring out the shape of the appearance customization, whether we'll use CSS Shadow Parts, CSS custom properties, or some other styling pattern.

[domenic]

It seems like most things for the toast itself can be accomplished using normal CSS properties.

---

For the action button, you can style it using [slot="action"], e.g.

std-toast [slot="action"] {
    color: blue;
    text-transform: uppercase;
}

We could also expose this as pseudo-element, which would allow e.g.

std-toast::part(action) {
    color: blue;
    text-transform: uppercase;
}

but I'm unsure whether that's a good idea. Pseudo-elements are usually for things that are more "hidden" and not just normal elements. I.e. you don't do details::part(summary) { ... }, you do details summary { ... }. The cases aren't exactly the same, as we're allowing any element to be the action via slot="action" instead of restricting it to only summary elements like details does. But I think [slot="action"] is still pretty reasonable.

---

The close button will probably make sense to style using a pseudo-element, at least using the current design.