AMPHTML项目中HTMLElement instanceof检测问题解析

在AMPHTML项目中，开发者遇到了一个关于HTMLElement instanceof检测的兼容性问题。这个问题特别影响了Google Maps JavaScript API在AMP环境中的正常运行，导致信息窗口无法正确打开。

问题背景

当开发者尝试在AMP页面中使用Google Maps JavaScript API时，发现从v3.55版本开始，地图标记点击后信息窗口无法正常显示。经过深入调试发现，问题根源在于AMP的JavaScript运行时对HTMLElement的instanceof检测实现方式。

技术分析

在标准浏览器环境中，对于一个按钮元素，以下检测应该返回true：

document.createElement('button') instanceof HTMLElement

然而在AMP的JavaScript运行时(v0.js)中，这个检测却返回false。这是因为AMP为了支持更广泛的浏览器兼容性，对HTMLElement进行了polyfill处理。这种polyfill实现方式导致了instanceof操作符的行为与原生实现不一致。

影响范围

这个问题主要影响：

1. 使用AMP JavaScript运行时(v0.js)的页面
2. 依赖标准HTMLElement instanceof检测的第三方库
3. 特别影响了Google Maps JavaScript API v3.55+版本中信息窗口的关闭按钮检测逻辑

解决方案

对于遇到此问题的开发者，可以考虑以下几种解决方案：

1. 使用AMP的模块版本(v0.mjs)
   模块版本编译时要求更高的浏览器支持，因此不包含HTMLElement的polyfill，可以避免这个问题。

2. 自定义编译AMP运行时
   通过AMP的构建工具自行编译运行时，移除HTMLElement的polyfill。

3. 隔离第三方库使用
   将Google Maps等依赖标准DOM API的功能放在iframe中运行，与主页面环境隔离。

4. 临时补丁方案
   在代码中临时覆盖window.HTMLElement引用，但这需要精确控制执行时机。

长期建议

对于AMP项目维护者而言，这个问题反映了polyfill实现与现代Web API兼容性之间的平衡难题。建议考虑：

1. 评估HTMLElement polyfill的必要性，现代浏览器已广泛支持
2. 提供更多构建选项，让开发者可以根据目标浏览器选择功能集
3. 加强与主流库的兼容性测试，特别是Google自家的产品集成

对于开发者而言，在AMP项目中使用复杂第三方库时，建议提前测试核心功能的兼容性，并考虑使用模块版本或iframe隔离等方案来确保功能稳定。