本文介绍如何在嵌套 dom 结构中安全、独立地管理多个层级的 loading 状态，避免样式冲突与逻辑覆盖，通过唯一标识（`loading` 属性）实现精准控制。
在 Web 应用中，常需对不同区域（如主容器、子模块、弹窗、上传组件等）独立展示 loading 状态。但当多个 loading 共存于嵌套结构中（例如 #upload 在 #main 内部），若仅依赖 CSS 类名（如 .webAppModal__loading）进行查找与操作，极易因 querySelector 返回首个匹配项而造成误显/误隐——即点击“上传 loading”时，可能意外激活了父级的 loading 层。
原方案的问题根源在于：
- showLoading() 仅根据传入的选择器查找 .webAppModal__loading，未区分作用域；
- 子元素中的 loading 被父元素的 .webAppModal__loading 查询逻辑“捕获”，导致层级错乱；
- 缺乏唯一性标识，无法保证每个 loading 实例与其触发目标严格绑定。
✅ 解决方案：引入语义化唯一标识 loading 属性
不再依赖类名定位，而是为每个 loading 容器添加自定义属性 loading=”xxx”（如 loading=”main”、loading=”upload”），并在 JS 中通过属性选择器精准定位：
// 查找指定 name 的 loading 元素（全局唯一）
$(`[loading="${name}"]`).get()[0]
该方式天然支持嵌套结构：即使 #upload 内部存在 loading，其 loading=”upload” 属性也确保它不会被 loading=”main” 的操作影响。
