如何为ion-toast内嵌套shadow DOM中的ion-icon设置自定义样式？

可行解决方案 #

方案1：使用Toast原生icon配置（优先推荐） #

Ionic Toast 原生支持独立配置 icon 字段，无需手动拼接在 message HTML 中，icon 会单独暴露可控制的样式钩子，直接配置即可实现尺寸大于文本的需求：

let opts = {
  icon: 'icon-name',
  message: '提示文本内容',
  cssClass: 'custom-toast'
};
const toast = await this.toastController.create(opts);

在全局样式文件（如 Angular 项目的styles.scss、Vue 项目的全局样式文件）中添加如下样式：

ion-toast.custom-toast {
  &::part(message) {
    font-size: 1.2em;
  }
  &::part(icon) {
    font-size: 3em;
  }
}

方案2：保留message拼接icon写法，调整样式作用域 #

如果必须将 icon 写在 message 的动态HTML内容中，只需要调整样式的作用域即可：

1. 先给 Toast 配置自定义类名，同时给插入的icon添加自定义类

let opts = { 
  message: '<ion-icon name="icon-name" class="toast-custom-icon"></ion-icon> 提示文本内容',
  cssClass: 'custom-toast'
};
const toast = await this.toastController.create(opts);

2. 在全局样式文件中添加对应样式：

ion-toast.custom-toast::part(message) .toast-custom-icon {
  font-size: 3em;
}

方案3：关闭当前组件视图封装（仅临时测试用，不推荐长期使用） #

如果是 Angular 项目，可在当前调用 Toast 的组件配置中关闭视图封装，组件内写的样式即可作用到全局 Toast 元素上，但会有样式污染风险：

import { ViewEncapsulation } from '@angular/core';

@Component({
  // 其他组件配置不变
  encapsulation: ViewEncapsulation.None
})

原写法失效原因说明 #

• /deep/、::ng-deep这类穿透选择器已被Web标准废弃，Ionic高版本不再支持
• 写在业务组件内的样式受框架视图封装限制，无法作用到全局动态生成的ion-toast元素上
• ::part(message)::part(ion-icon)写法错误：你插入到message中的ion-icon属于slot分发的外部内容，不属于ion-toast的shadow DOM内部暴露的part，不需要用::part选择

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