Web组件：Dom异常：此名称已被使用

Question

TL：博士;我不知道如何在网站here上解决以下错误：

You will need credentials:
un: stackoverflowuserj23jf4@mailinator.com
pass: testingStackOverflow123

详细信息：我正在尝试conditionally include页面中的网页组件：

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
  if (document.querySelector('simple-fred')) {
    var script = document.createElement('script');
    script.src = 'https://embedint.crossroads.net/fred/js/simplefred.min.js';
    document.head.appendChild(script)
  }
});
</script>

有条件地包含脚本而不是静态破坏代码。上面的脚本曾经像这样加载： <script src="https://embedint.crossroads.net/fred/js/simplefred.min.js"></script>，有效

然后我在页面上包含该元素：

<simple-fred data-form-name="buildingblocksformarriage" data-redirect-url="/care/weddings/building-blocks-for-marriage/signup/confirmation">&nbsp;</simple-fred>

这在本地和plunker上运行良好。

要在plnkr上运行，您需要disable CORS blocking 用于Chrome，命令为：

TASKKILL /F /IM chrome.exe
start chrome.exe --args --disable-web-security --user-data-dir
pause

这一切都很好，但是当我与其他代码一起运行此代码时，它会失败。我收到以下错误（同样的错误，浏览器报告的方式不同）：

Chrome：

  

未捕获DOMException：无法执行＆＃39;定义＆＃39;上   ＆＃39; CustomElementRegistry＆＃39;：此名称已经与此一起使用   注册处       在Function.value（https://embedint.crossroads.net/fred/js/simplefred.min.js:5:383105）

的Mozilla：

  

错误：名称为＆＃39; slim-repeat＆＃39;的自定义元素已经过了   定义

这个错误似乎是由两个第三方尝试创建相同的自定义组件造成的，据我所知判断question I have a bounty on

我现在处于亏损状态。抛出错误的int环境在这里：

https://int.crossroads.net/care/weddings/building-blocks-for-marriage/signup

您可能需要登录，我创建了一个以便更快（可以共享）：

stackoverflowuserj23jf4@mailinator.com
testingStackOverflow123

代码是开源的，可以在这里找到（我不认为看它会有所帮助，只是为了完整性）：https://github.com/crdschurch/crds-fred/blob/development/CrdsFred/Views/Form/Index.cshtml

我该如何解决这个问题？

或者至少，可能的原因？我将至少给予100点奖励以奖励接受的答案。

Answer 1

看起来有一个名为slim-js的节点模块，它在Slim.js的第1057行和/或1146行创建了一个名为slim-repeat的元素（见截图）。也许你只需要选择一个不同的名字？

Answer 2

我是这个图书馆的作者，我想提供帮助。我将为此问题部署一个热修复程序。如果已经初始化了另一个Slim实例，则最终不会运行整个脚本。