Web Component报Dom Exception错误：名称已被占用，寻求解决方法

这个DOM异常的核心原因很明确：你尝试重复注册同一个自定义元素标签名（这里是simple-fred）。当浏览器检测到customElements.define()被调用两次（或多次）注册相同名称的元素时，就会抛出这个错误。结合你的代码场景，我整理了几个常见原因和对应的解决办法：

可能的原因与修复方案 #

1. 脚本被重复加载执行 #

你的逻辑是检测到页面中有simple-fred元素就加载组件脚本，但如果脚本已经被加载过（比如页面其他逻辑触发了同样的加载、或者页面刷新后脚本缓存但注册逻辑重复执行），就会导致重复注册。

修复代码：在加载脚本前先检查元素是否已经被注册：

document.addEventListener("DOMContentLoaded", function(event) {
  const targetEl = document.querySelector('simple-fred');
  // 先判断元素存在，且未被注册
  if (targetEl && !customElements.get('simple-fred')) {
    const script = document.createElement('script');
    script.src = 'https://embedint.crossroads.net/fred/js/simplefred.min.js';
    document.head.appendChild(script); // 你原代码这里似乎漏了appendChild，记得补上
  }
});

2. 组件脚本内部未做注册防护 #

如果simplefred.min.js里的代码没有判断元素是否已注册，直接执行customElements.define('simple-fred', ...)，哪怕只加载一次，某些异步场景下也可能触发重复注册（比如脚本被意外多次注入）。

修复建议：如果可以修改组件脚本，在注册前增加判断：

// 在simplefred.min.js的注册逻辑前添加
if (!customElements.get('simple-fred')) {
  class SimpleFred extends HTMLElement {
    // 你的组件逻辑
  }
  customElements.define('simple-fred', SimpleFred);
}

3. 页面存在多个simple-fred元素导致重复触发加载 #

如果页面里有多个simple-fred标签，你的原代码会多次创建脚本标签——虽然浏览器会缓存脚本，但脚本执行时还是会重复触发注册逻辑。

修复方案：上面第1种方案里的customElements.get检查已经能覆盖这种情况，确保只会注册一次。

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