如何在HTML中导入其他HTML？自定义组件加载失败排查

你的问题核心是两个连锁错误：navigation.html 404 找不到（导致后续加载失败），以及navigation.js 无法读取 null 的 content 属性（因为依赖的模板或元素不存在）。以下是针对性的解决步骤和替代方案：

第一步：先解决 404 错误 #

404 是根因，必须优先处理：

• 核对文件路径：确保 navigation.html 和 test.html 的相对路径正确。比如 test.html 在根目录，navigation.html 也在根目录的话，请求路径写 ./navigation.html；如果 navigation.html 在 components 子文件夹，路径要写成 ./components/navigation.html。
• 检查拼写与大小写：部分服务器区分文件名大小写，比如 Navigation.html 和 navigation.html 会被视为不同文件，确保文件名完全匹配。
• 用开发者工具的「Network」标签查看请求 URL，确认实际请求的路径是否符合预期。

第二步：修复自定义 Web Component 加载逻辑 #

你原来用 XMLHttpRequest 的方式容易出现加载时机或路径问题，推荐用更现代的 fetch API 实现，代码更简洁可靠：

1. 改写 main.js #

class NavComponent extends HTMLElement {
  constructor() {
    super();
    // 开启 shadow DOM
    this.attachShadow({ mode: 'open' });
  }

  async connectedCallback() {
    try {
      // 这里的路径必须和 navigation.html 实际位置匹配
      const res = await fetch('./navigation.html');
      if (!res.ok) throw new Error(`加载失败：${res.status}`);
      const htmlContent = await res.text();
      // 直接将 HTML 插入 shadow DOM
      this.shadowRoot.innerHTML = htmlContent;
    } catch (err) {
      console.error('导航加载出错:', err);
      this.shadowRoot.innerHTML = '<p>导航加载失败</p>';
    }
  }
}

// 注册自定义组件
customElements.define('nav-component', NavComponent);

2. navigation.html 直接写导航内容 #

不需要嵌套 template，直接放纯 HTML：

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
</nav>

3. test.html 引入组件 #

确保脚本用 defer 避免阻塞 DOM 解析：

<!DOCTYPE html>
<html>
<head>
  <title>测试页面</title>
  <script src="./main.js" defer></script>
</head>
<body>
  <nav-component></nav-component>
  <!-- 其他页面内容 -->
</body>
</html>

替代方案：不用 Web Component 的简单实现 #

如果不想写自定义组件，用 jQuery 的 load 方法更快捷：

<!DOCTYPE html>
<html>
<head>
  <title>测试页面</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
  <!-- 预留导航容器 -->
  <div id="nav-container"></div>

  <script>
    $(document).ready(() => {
      $('#nav-container').load('./navigation.html', (response, status) => {
        if (status === 'error') {
          console.error('导航加载失败');
          $('#nav-container').html('<p>导航加载失败</p>');
        }
      });
    });
  </script>
</body>
</html>

原错误的原因解释 #

• 「无法读取 null 的 content 属性」：你原来的 navigation.js 可能试图获取某个 <template> 元素，但因为 navigation.html 404 加载失败，导致获取到的元素是 null，访问 content 属性自然报错。
• 只要解决了 404 问题，再配合正确的加载逻辑，shadow-root 就会正常显示导航内容。

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