Javascript 导入serval webcomponent时上一个自定义元素被下一个元素覆盖

当一个页面中有多个自定义元素时，为什么总是显示最后一个元素而覆盖上一个元素。例如：

第一个组件：

网络组件1
var thatDoc=文档；
var thisDoc=（thatDoc.|currentScript | thatDoc.currentScript）.ownerDocument；
var t=thisDoc.querySelector（'cmpt-1'）；
var protos=Object.create（HTMLElement.prototype{
createdCallback：{
值：函数（）{
var clone=thatDoc.importNode（t.content，true）；
this.createShadowRoot（）.appendChild（克隆）；
}
}
});
该文档注册表项（'cmpt-1'{
原型：protos
}); 

将脚本标记中的代码包装到立即调用的函数表达式中以限制作用域可以解决您的问题。

网络组件2
（功能（）{
var thatDoc=文档；
var thisDoc=（thatDoc.|currentScript | thatDoc.currentScript）.ownerDocument；
var t=thisDoc.querySelector（“#cmpt-2”）；
var protos=Object.create（HTMLElement.prototype{
createdCallback：{
值：函数（）{
var clone=thatDoc.importNode（t.content，true）；
this.createShadowRoot（）.appendChild（克隆）；
}
}
});
该文档注册表项（'cmpt-2'{
原型：protos
});
})();

定义全局范围内的所有变量-两次，实际上，

protos

是在呈现组件时指向第二个组件的指针。快速修复方法是将每个

protos

重命名为类似

cmpt1

和

cmpt2

的合理值，并在

thatDoc.registerement

中引用正确的变量。更好的解决方案是创建一个初始化自定义组件的通用函数，并完全避免全局作用域。

如果没有可运行的代码，则应使用代码示例而不是代码段。