javascript - Web 组件 : Dom Exception: This name has already been used

Question

tl:dr;我不知道如何修复网站上的以下错误 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 :

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Function.value (https://embedint.crossroads.net/fred/js/simplefred.min.js:5:383105)

摩斯拉:

Error: A custom element with name 'slim-repeat' has already been defined.

据我所知，这个错误似乎是由两个第三方试图创建相同的自定义组件引起的 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 的元素(见屏幕截图)。也许您只需要选择一个不同的名称？