Google model-viewer搭配Svelte组件使用时iOS端Quick Look AR按钮消失问题咨询

核心成因 #

两个独立机制的不兼容是问题根源：

• model-viewer的Quick Look按钮内置安全校验逻辑：为满足iOS平台的弹窗安全要求，组件初始化时会判断自身DOM节点是否为页面初始静态HTML的一部分。若检测到节点是页面加载完成后被JS动态插入到DOM中的，会自动隐藏Quick Look按钮——iOS系统本身就会拦截动态创建链接发起的Quick Look唤起请求，组件的这一设计是为了避免无效的交互入口。
• Svelte默认纯客户端渲染的DOM创建逻辑：纯CSR模式下，Svelte运行时会在DOMContentLoaded事件触发后，通过JS动态创建完整的应用DOM树并插入到挂载节点中。哪怕仅挂载一个完全无交互的空组件，整个渲染过程都是JS驱动的，不存在初始静态HTML内容，这会被model-viewer直接判定为动态插入节点，触发按钮隐藏逻辑。

这一逻辑完全匹配所有观察到的现象：

• 按钮消失与Svelte组件同model-viewer的交互无关，只要Svelte运行时介入DOM渲染，model-viewer就会被判定为动态创建
• 纯原生静态HTML场景下，model-viewer是初始页面内容的一部分，可顺利通过校验显示按钮
• Svelte的条件渲染、事件修饰符、自定义属性等特性触发问题的本质，是这些特性都会激活Svelte运行时的DOM创建流程

可落地的解决方向 #

• 物理隔离Svelte渲染边界
  将model-viewer节点放置在Svelte挂载容器的外部，作为页面初始静态HTML的一部分存在。Svelte仅负责渲染需要交互的业务组件，不通过JS创建、修改model-viewer的DOM结构，确保model-viewer保持静态节点属性，通过iOS的安全校验。
• 开启Svelte hydration模式
  配置Svelte的SSR/SSG流程，让model-viewer节点作为服务端输出的静态HTML存在于初始页面中。客户端hydration阶段，Svelte仅对已有静态节点绑定对应事件，不重新创建DOM节点，即可通过model-viewer的静态节点校验。
• 绕过动态节点检测逻辑
  纯CSR场景下，可在model-viewer初始化完成后，通过全局API强制覆盖其内部的Quick Look显示状态，绕过动态插入的检测分支，强制显示按钮。
• 调整组件加载时机
  在Svelte的onMount生命周期触发、页面readyState变为complete后，再注册model-viewer的自定义元素，并手动触发其AR配置的重新校验，让组件正确识别当前iOS环境的Quick Look能力。

内容的提问来源于stack exchange，提问作者adkaros