object标签不支持多层嵌套式fallback链，每个object独立加载与校验；仅当外层加载失败时，内层object才作为其HTML fallback内容被解析执行，二者无状态关联。
object 标签本身不支持“多层嵌套”这一概念——它不是容器型结构标签，不能像 div 或 details 那样靠 DOM 层级实现交互式嵌套。所谓“object 多层嵌套”，实际是开发者误将多个独立 object 元素按父子关系书写，却期待它们产生联动效果（比如外层加载失败才试内层），这在标准行为中不会发生。
为什么不能靠嵌套 object 实现 fallback 链
浏览器对每个 object 元素单独发起资源请求、校验 type 与响应头、判断是否渲染内部内容。即使你写成：
<object data="a.pdf" type="application/pdf">
<object data="b.svg" type="image/svg+xml">
<p>全部失败</p>
</object>
</object>
结果是：外层 object 加载 a.pdf 成功就停，根本不会去管里面那个 object；只有外层明确失败（如 404、CORS、type 不匹配），才会渲染其内部的 HTML 内容——而那段内容里又是一个独立的 object，它会自己再走一遍加载流程，和外层无状态关联。
- 这不是 fallback “链”，而是 fallback “树”的第一层展开
- 没有自动降级跳转逻辑，也没有共享加载状态
- 若想手动控制多级尝试，必须用 JS 主动创建、替换、监听
load/error事件
object 嵌套另一个 object 的唯一合法场景
仅当内层 object 是外层 object 的 fallback 内容时才成立，且必须满足两个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 外层
data指向的资源必须真实加载失败（不是“没显示”，而是网络/协议/MIME 层面失败） - 内层
object必须是有效的 HTML 子节点（即包裹在<object>...</object>内部的完整元素，不能是字符串或注释）
例如 PDF + SVG 降级：
<object data="report.pdf" type="application/pdf" width="800" height="600">
<p>PDF 加载失败，尝试 SVG 版本：</p>
<object data="report.svg" type="image/svg+xml" width="800" height="600">
<p>SVG 也加载失败，请下载原始文件。</p>
</object>
</object>
注意：report.svg 要求同源，否则 contentDocument 不可访问；若需跨域交互，fallback 到 img 更现实。
真正需要“多层嵌套内容”的时候，该用什么
如果你实际想实现的是「外层 tab → 中层子 tab → 内层 object 资源」这类结构，关键不在 object 嵌套，而在层级隔离：
- 每层 tab 用独立的
input[type="radio"]+:checked ~ .tab-content控制显隐 - 每层
.tab-content内可放一个object，但它们之间无 DOM 关联，只靠 CSS 选择器作用域隔离 - 不要把
object放进summary或details里试图“折叠嵌套”——object加载是异步的，折叠展开时可能已触发加载，无法重置 - 本地开发时，
file://协议下多数浏览器会忽略type，直接按扩展名判断，导致 fallback 不触发；务必用http://localhost启服务验证
最易被忽略的一点：你写的每一个 object 都在独立发起请求、独立校验 MIME、独立决定是否 fallback。它不“继承”父级状态，也不“等待”兄弟元素。想让它听话，就得用 JS 显式控制生命周期，而不是靠缩进或嵌套位置。
