原生html无toast组件，需用div+css+js实现；document.createelement('toast')不显示因未注册为自定义元素；必须含短横线命名、用fixed定位并挂载到body、单例管理避免叠加、动画结束用animationend+settimeout双保险清理。
原生 HTML 没有 toast 组件，所有“HTML toast”本质是用 div + CSS 动画 + JS 控制显隐实现的；直接写 <toast></toast> 或依赖未引入的库会完全不生效。
为什么 document.createElement('toast') 不显示
浏览器只识别标准 HTML 元素（如 div、span），toast 是自定义语义标签，不加 defineElement 或 Web Components 注册就只是普通未知节点，无样式、无行为、不触发渲染。
- 若用
customElements.define('my-toast', class extends HTMLElement {...})，必须确保执行时机在 DOM 加载后，且不能重复注册 - 更轻量的做法是放弃自定义标签，直接用
div加class="toast"—— 95% 的项目都这么干 - 检查控制台是否报错
Failed to execute 'define' on 'CustomElementRegistry': the name "toast" is not a valid custom element name：因为标签名必须含短横线，toast合法，但mytoast不合法
position: fixed 导致 toast 被遮挡或定位偏移
toast 必须用 position: fixed 才能脱离文档流、覆盖全局，但它的 top/right 值容易被父容器的 transform、perspective 或 filter 干扰 —— 这些属性会创建新的层叠上下文和包含块，使 fixed 相对于该父容器定位，而非视口。
- 排查方法：给疑似干扰的祖先元素临时加
outline: 1px solid red，看 toast 是否突然“贴着它右上角”出现 - 修复方式：在 toast 的父级（通常是
body）直接 append，避免嵌套在transform: translateY(0)等容器里 - 安全写法：
document.body.appendChild(toastEl)，而不是container.appendChild(toastEl)
showToast() 调用多次，toast 叠加不销毁
常见错误是每次调用都 document.body.appendChild 新节点，却不清理前一个。用户快速点击 5 次，页面就堆 5 个 toast，动画卡顿、内存泄漏、z-index 错乱全来了。
- 必须维护一个单例引用：
let currentToast = null，每次 show 前先currentToast?.remove() - 自动销毁不能只靠 CSS
animationend：动画可能被系统设置跳过（如 macOS 减少动画）、或用户切到其他 tab 导致计时器暂停，建议用setTimeout双保险（比如 3s 后 remove，同时监听animationend提前收尾） - 别用
display: none隐藏旧 toast：它仍占 DOM，z-index 和事件监听器还在，应彻底remove()
最易被忽略的是动画结束后的 cleanup 时机 —— 很多人监听 transitionend，但 toast 进出场通常用 animation（如 fadeIn + fadeOut），该监听 animationend，且需过滤伪元素和非目标动画名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
