iOS Safari下video标签为何有时显示Shadow DOM有时显示source子元素？

核心结论 #

这种显示差异是Safari内置的行为，和你改用video+source标签组合、视频源（src）的有效性直接相关，完全不需要你手动编写Shadow DOM逻辑。

具体场景拆解 #

• 显示<source>标签的情况
  当video元素还未成功匹配到可播放的视频源时，Safari会保留你编写的原始DOM结构：

  • 改用video+source组合后，浏览器需要逐个尝试<source>里的资源，在这个过程中（比如还未确定支持的格式、资源加载失败、路径无效），不会触发Shadow DOM控件的渲染，开发者工具里就会显示你写的<source>标签（对应示例2）。
  • 如果src指向的视频格式不被iOS Safari支持（比如webm格式，iOS原生不兼容），也会一直停留在显示<source>的状态。

• 显示Shadow DOM的情况
  一旦video成功加载并识别到有效可播放的视频源（比如mp4格式的资源加载完成），Safari会自动生成浏览器内置的Shadow DOM，用来渲染默认的媒体控制栏（对应示例1里的#shadowcontent(user-agent)和控制容器），此时原始的<source>标签会被隐藏，开发者工具中就只展示Shadow DOM内容。

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