web components 实现全局通知提示框的核心是创建可复用、无框架依赖、支持跨组件通信的自定义元素 ，通过 custom element 定义、shadowroot 隔离、attributechangedcallback 响应属性、customevent 派发触发、队列管理、主题定制及静态配置接口，构建轻量且真正的全局通知系统。
Web Components 实现全局通知提示框，核心在于创建一个可复用、不依赖框架、能跨页面/组件通信的自定义元素。关键不是“挂载到 body”，而是让通知逻辑与 DOM 生命周期解耦，同时支持多实例、自动销毁和主题定制。
用 Custom Element 定义通知组件
创建 <notify-toast></notify-toast> 自定义元素，封装样式、动画和 DOM 操作。它本身不主动显示，只负责渲染单条通知。
- 继承
HTMLElement，使用shadowRoot隔离样式，避免污染全局 - 通过
attributeChangedCallback响应message、type（success/warn/error）、duration等属性变化 - 内部用
setTimeout触发remove()，配合 CSS 动画（如opacity+transform）实现淡入淡出
用 CustomEvent 实现跨组件触发
全局通知的“调用入口”不应是直接 new 组件，而应统一通过事件派发——让任意地方只需 dispatch 一个事件就能弹出提示。
- 定义一个全局事件名，如
notify:show，携带 { message, type, duration } 数据 - 在页面初始化时（或首次 import 组件时），监听该事件：
document.addEventListener('notify:show', e => { ... }) - 监听器中动态创建
<notify-toast></notify-toast>实例，设置属性后 append 到document.body
管理通知队列与生命周期
避免多个提示堆叠遮挡，需控制显示顺序和自动清理。
- 维护一个数组记录当前活跃的 toast 实例，新通知到来时可选择“排队”或“替换最近一条”
- 每个 toast 移除前触发
notify:close自定义事件，供外部监听（如日志埋点） - 监听
transitionend或使用getComputedStyle检测动画结束，再真正 remove 元素，防止 DOM 泄漏
支持主题与配置注入
通过 :host 伪类 + CSS 自定义属性，让主题可外部覆盖；通过静态方法暴露配置接口。
- 组件内定义
--toast-bg、--toast-radius等变量，允许父级通过<notify-toast style="--toast-bg: #2a80ff"></notify-toast>覆盖 - 提供
NotifyToast.setDefaultConfig({ duration: 3000, position: 'top-right' })方法，影响后续所有实例 - position 由父容器（如
<notify-container></notify-container>）控制，它作为固定定位容器包裹所有 toast，避免每条都操作 body
不复杂但容易忽略：确保事件监听只注册一次（可用 WeakMap 标记），shadow DOM 内部样式用 @keyframes 定义在 <style></style> 中，且 toast 的 z-index 足够高（如 10000）。这样就形成了真正“全局”又“轻量”的通知系统。
