弹窗标签页必须与主页面完全隔离，包括DOM结构、CSS作用域、JS状态和事件监听，避免样式覆盖、状态污染和事件残留。
弹窗里的标签页必须和主页面的标签逻辑完全隔离，否则点击弹窗标签会意外触发主页面切换或状态错乱。
弹窗 DOM 必须脱离主文档流
用 document.createElement 动态生成弹窗，或确保弹窗 HTML 是独立片段（比如放在 <template> 里），不能复用主页面已有的 tab 类名或 ID。常见错误是直接把主页面的 tab 结构 innerHTML 进弹窗，导致 querySelector(".tab") 一把抓到全局所有标签。
- 弹窗内所有标签按钮、内容区的 class 和 id 都要加前缀，比如
popup-tab-btn、popup-tab-pane-1 - JS 初始化时，限定作用域：用
popupEl.querySelector(".popup-tab-btn")替代document.querySelectorAll(".tab-btn") - 避免用全局事件委托监听弹窗 tab —— 用事件代理到弹窗容器本身，或直接绑定到每个按钮
切换逻辑不能共享状态变量
主页面可能有 currentTab 变量或 class 控制激活态，弹窗必须维护自己的独立状态。否则关掉弹窗再打开，标签会“记住”上次主页面的选中项。
- 每个弹窗实例应有私有状态对象，例如
const popupState = { activeId: "popup-tab1" } - 不要用
document.body.classList.toggle("tab-active")这类无作用域的操作 - 如果弹窗可多次打开（比如不同数据驱动），每次打开都要重置状态，不能靠上一次残留
样式隔离防冲突
弹窗标签的 CSS 规则必须带足够强的作用域前缀，否则主页面的 .tab.active 可能覆盖弹窗样式，造成视觉错位甚至功能失效。
立即学习“前端免费学习笔记（深入）”；
- 写成
.popup-modal .popup-tab-btn.active，而不是仅.tab-btn.active - 避免用
!important强行覆盖；优先靠选择器权重或嵌套层级控制 - 如果用 Shadow DOM，天然隔离，但需注意
slot内容样式穿透问题
关闭弹窗时要清理事件监听
弹窗关闭后若没移除事件监听，残留的 click 处理函数仍可能执行，尤其当按钮被重复创建又销毁时，容易引发 Cannot read property 'dataset' of null 错误。
- 给每个按钮绑定监听时，保存引用：
const handler = () => {...}; btn.addEventListener("click", handler) - 关闭弹窗前调用
btn.removeEventListener("click", handler) - 或者用一次性监听：
btn.addEventListener("click", handler, { once: true })
最易被忽略的是：弹窗内标签切换时，如果用了 history.pushState 或监听了 hashchange，会污染主页面 URL 状态——弹窗标签页不该影响浏览器地址栏。
