Safari可自定义内置元素polyfill：script标签引入与ES6 import效果差异问题

1. 为什么@webcomponents/custom-elements无效 #

@webcomponents官方的Custom Elements V1 polyfill仅支持自主自定义元素（即直接继承HTMLElement的自定义元素），不支持自定义内置元素（也就是你用到的继承HTMLAnchorElement这类内置元素的写法），所以无论怎么引入都无法满足需求，你选择@ungap/custom-elements作为替代是正确的。

2. 为什么script标签引入有效、ES import引入无效 #

两者加载的包版本和执行逻辑有本质区别：

• script标签引入的是UMD格式的包，加载后会自动执行，直接把补丁逻辑注入全局window对象，覆盖原生的自定义元素相关API，因此直接生效。
• 你之前的ESM引入写法有问题：import ungapCustomElements from "xxx"是导入模块的默认导出，而@ungap/custom-elements的ESM版本默认不会自动执行补丁逻辑，加上CDN默认会做tree shaking优化，移除未被使用的副作用代码，导致补丁根本没有运行，自然不生效。

3. 正确的ESM引入方法 #

只需要修改引入写法，将polyfill作为副作用模块导入即可，不需要接收导出值：

// 放在main.js的最顶部，所有自定义元素定义代码之前
import "https://cdn.skypack.dev/@ungap/custom-elements";

如果仍不生效，可以将@ungap/custom-elements的源码下载到本地作为本地模块导入，避免CDN的打包优化移除必要的副作用代码。

4. 额外注意事项 #

必须保证polyfill的导入顺序在所有自定义元素定义、注册代码之前，否则补丁逻辑无法覆盖已经执行的继承、注册操作，仍会失效。

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