如何用CSS选择Ionic Toast组件Shadow Part的后代元素？

你遇到的核心问题是CSS Shadow Part的后代选择器无法穿透到part内部的子元素——这是Shadow DOM样式隔离机制的限制：::part()选择器仅能直接选中被暴露的part元素本身，无法直接选中其内部的后代节点（比如<a>标签），除非这些后代也被定义为CSS Shadow Part（而Ionic并没有为toast message内的链接提供对应的part）。

可行的解决方案 #

方案1：给Toast添加自定义类，结合全局样式选中链接

1. 创建Toast时指定cssClass属性，添加自定义类名：

// 示例：Angular环境下的代码
const toast = await this.toastController.create({
  message: '请点击<a href="/details">这里</a>查看详情',
  cssClass: 'custom-toast', // 自定义类
  duration: 3000
});
await toast.present();

2. 在全局样式文件（如global.scss）中，通过自定义类 + 内部元素选择器来设置链接样式：

.custom-toast ::part(message) a {
  color: #1976d2; // 自定义链接颜色
  text-decoration: underline;
}

这里利用::part(message)选中暴露的message容器，结合自定义类的作用域，确保样式只作用于目标toast。

方案2：给链接添加自定义类，直接全局定义样式

如果只需要给特定链接设置样式，可以在message的HTML内容中给链接加上自定义类，然后在全局样式中定义该类：

1. 创建Toast时给链接加类：

const toast = await this.toastController.create({
  message: '请点击<a class="toast-action-link" href="/details">这里</a>查看详情',
  duration: 3000
});
await toast.present();

2. 全局样式中定义类：

.toast-action-link {
  color: #dc004e;
  font-weight: bold;
}

这种方式更直接，适合只需要单独设置链接样式的场景。

为什么::first-letter可以生效？ #

ion-toast::part(message)::first-letter能生效，是因为::first-letter是目标part元素本身的伪元素，属于被::part()选中的元素的一部分，因此外部CSS可以对其生效；而<a>标签是独立的后代节点，不在外部样式的直接作用范围内。

内容的提问来源于stack exchange，提问作者Juho Rutila