Polymer 3.0使用paper-input时触发未捕获DOM异常求助

我之前帮不少开发者排查过这个报错，其实大概率不是Migration Tool的问题，而是重复导入了同一个自定义组件导致的——毕竟Polymer 3.0改用ES Modules后，重复执行模块代码就会触发自定义元素的重复注册。给你几个实际可行的排查和解决步骤：

• 先检查你的导入语句：看看是不是在多个文件里直接导入了@polymer/paper-input/paper-input.js，或者某个依赖包已经间接引入了它，你又手动加了一次导入。比如有些Polymer组件库会内置paper-input，这时候再单独导入就会冲突。
• 改用延迟/动态导入：如果是在按需加载的场景（比如路由页面），换成<lazy-import>组件来延迟导入，或者用import('@polymer/paper-input/paper-input.js')的动态导入方式，避免初始化阶段就重复加载组件代码。
• 检查Migration Tool生成的代码：虽然你怀疑工具的问题，但可以看看它把旧的HTML导入转换成ES Modules时，有没有重复生成同一个组件的导入语句——比如旧代码里多次引用的<link rel="import">被转换成了多份import，这时候合并成一次导入就行。
• 清理浏览器缓存：有时候旧的模块代码被缓存，也会导致重复注册。打开开发者工具，勾选「禁用缓存」选项后刷新页面，看看报错是否消失。
• 用控制台排查已注册元素：在浏览器控制台执行customElements.get('paper-input')，如果返回了元素构造函数，说明这个元素已经被注册了，顺着这个线索找一找是哪个文件提前导入了它。

我遇到的大部分情况都是重复导入导致的，你从检查导入语句开始排查，应该很快能解决问题。

内容的提问来源于stack exchange，提问作者Ignacio Nacho Parravicini