本文介绍如何在嵌套容器中安全、独立地管理多个动态加载状态（如主页面加载与子模块上传加载），通过唯一标识符实现加载层精准控制，彻底解决层级覆盖与 dom 冲突问题。
在构建复杂 Web 应用时，常需对不同区域（如整个页面、弹窗、表单、上传模块）分别展示加载状态。但若多个加载层共用同一 CSS 类名（如 .webAppModal__loading）且未做作用域隔离，就会出现：外层加载未关闭时触发内层加载，导致重复插入、样式错乱、z-index 层叠异常，甚至 JS 查询冲突——正如原始代码中点击“loading upload image”后，因 querySelector(“.webAppModal__loading”) 在父容器 #main 中已存在同名元素，导致新 loading 无法正确创建或显示。
核心问题在于：缺乏加载实例的唯一性标识与作用域绑定。原始方案依赖 element.querySelector() 向下查找，但无法区分“属于当前容器的 loading”和“来自父级的干扰 loading”。
✅ 正确解法是引入语义化命名机制 + 自定义属性定位：
为每个加载层分配唯一业务名称（如 “main”、”upload”），并将其作为 HTML 自定义属性 loading=”main” 绑定到对应
上。这样即可通过 document.querySelector(‘[loading=”upload”]’) 精准定位，完全规避父子容器间 class 名冲突。
以下是优化后的关键实现逻辑：
