如何在 HTML 自定义元素中优雅地加载并使用外部 JSON 数据-js教程-PHP中文网

如何在 HTML 自定义元素中优雅地加载并使用外部 JSON 数据

本文介绍一种无需全局变量、不依赖框架的纯原生方案，通过延迟自定义元素注册与按需数据获取，解决 vite 项目中外部 json 数据与自定义元素初始化时机不同步的问题。

本文介绍一种无需全局变量、不依赖框架的纯原生方案，通过延迟自定义元素注册与按需数据获取，解决 vite 项目中外部 json 数据与自定义元素初始化时机不同步的问题。

在构建轻量级静态站点时，HTML 自定义元素（Custom Elements）是替代 React/Vue 的理想选择——它语义清晰、样式可全局复用、无运行时开销。但当元素需要渲染动态内容（如来自 /config.json 的结构化数据）时，开发者常陷入经典的时机陷阱：DOM 中的 <my-element></my-element> 标签在脚本执行前已被解析，导致 constructor 和 connectedCallback 提前触发，而此时外部数据尚未加载完成。

你的原始思路（在 main.js 中 fetch 后再 new MyElement(config)）失败的根本原因在于：浏览器会自动实例化已注册的自定义元素标签，与你手动 new 无关。一旦 customElements.define('my-element', MyElement) 执行，所有 <my-element></my-element> 就立即被构造——哪怕你还没拿到数据。

✅ 正确解法：推迟注册 + 懒加载数据

核心原则：不在数据就绪前注册自定义元素。将 customElements.define() 移至数据加载完成后执行，并让每个元素按需读取其专属数据项（而非整个 config）。

✅ 推荐实现（`main.js`）

// main.js
const loadConfig = () => fetch('/config.json').then(r => r.json());

// 1. 先加载配置
loadConfig().then(config => {
  console.log('[Main] Config loaded:', config);

  // 2. 动态导入并注册自定义元素（此时 config 可闭包访问）
  Promise.all([
    import('./custom-elements/MyElement.js').then(m => 
      m.default.configure(config)
    ),
    import('./custom-elements/AnotherElement.js').then(m => 
      m.default.configure(config)
    )
  ]).then(() => {
    console.log('[Main] All custom elements registered and ready');
  });
}).catch(err => console.error('Failed to load config:', err));

✅ 自定义元素改造（`MyElement.js`）

class MyElement extends HTMLElement {
  static #config = null;

  // 静态方法：接收全局配置，仅调用一次
  static configure(config) {
    this.#config = config;
    // ✅ 关键：此时才注册元素，确保所有 DOM 实例都能访问 config
    window.customElements.define('my-element', this);
  }

  constructor() {
    super();
    // 构造时 config 已就绪，可安全使用
    this.contentId = parseInt(this.getAttribute('data-content-id') || '0', 10);
  }

  connectedCallback() {
    if (!MyElement.#config) return;

    const item = MyElement.#config.find(c => c.id === this.contentId);
    if (item) {
      this.render(item);
    } else {
      console.warn(`[MyElement] No config found for id=${this.contentId}`);
      this.innerHTML = '<div class="error">Content not found</div>';
    }
  }

  render(data) {
    this.innerHTML = `
      <article><h2>${data.title}</h2>
        <p>${data.description}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
														src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
													<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
        @@##@@
      </article>
    `;
  }
}

export default MyElement;

? 为什么更优雅？

❌ 不污染 window 全局命名空间

✅ 配置通过闭包私有持有，类型安全、可维护

✅ 每个元素只取所需数据项（find），避免冗余传递

✅ 注册时机可控，彻底规避“双构造”问题

✅ 支持服务端渲染（SSR）友好：若预渲染 HTML，connectedCallback 仍能正确响应