HTML自定义元素加载外部JSON数据的时序问题及优雅实现方案

问题根源 #

当浏览器解析HTML中的自定义元素时，只要该元素类已通过customElements.define定义，浏览器会自动实例化这些DOM元素，导致constructor和connectedCallback在你的异步数据加载前就执行。而你在main.js中new MyElement(config)创建的是全新实例，和DOM中已存在的元素毫无关联，自然无法修改页面上的元素。

优雅解决方案（无全局变量污染） #

方案1：延迟自定义元素定义，待数据加载完成后再初始化

核心逻辑：先完成异步数据加载，再导入并定义自定义元素类。此时浏览器会自动实例化DOM中的元素，且元素可直接访问已就绪的数据。

修改main.js：

const init = async () => {
  const configFile = "/config.json";
  try {
    // 优先加载配置数据
    const response = await fetch(configFile);
    const config = await response.json();
    console.log("[Main] app initiated in main.js");

    // 数据就绪后，导入自定义元素类并挂载全局数据
    const { default: MyElement } = await import("./custom-elements/MyElement.js");
    const { default: AnotherElement } = await import("./custom-elements/AnotherElement.js");
    
    MyElement.globalConfig = config;
    AnotherElement.globalConfig = config;
  } catch (error) {
    console.error('Error:', error);
  }
};

init();

修改MyElement.js：

class MyElement extends HTMLElement {
  // 静态属性存储全局配置
  static globalConfig;

  constructor() {
    super();
    console.log("constructor");
  }

  useData(prop) {
    console.log("useData", prop);
    // 这里写你的业务逻辑
  }

  connectedCallback() {
    console.log("connected callback");
    // 根据data-content-id获取对应数据
    const contentId = this.dataset.contentId;
    const itemData = MyElement.globalConfig?.[contentId];
    
    if (itemData) {
      this.useData(itemData);
    }

    this.innerHTML = `
      <div>
        ${itemData?.title || 'No content'}
      </div>
    `;
  }
}

window.customElements.define('my-element', MyElement);
export default MyElement;

方案2：数据加载完成后批量更新DOM元素

核心逻辑：先定义自定义元素并做基础渲染（比如加载状态），等数据就绪后，直接遍历DOM中已存在的元素实例，传递对应数据并更新内容。

修改main.js：

import MyElement from "./custom-elements/MyElement.js";
import AnotherElement from "./custom-elements/AnotherElement.js";

const init = async () => {
  const configFile = "/config.json";
  try {
    const response = await fetch(configFile);
    const config = await response.json();
    console.log("[Main] app initiated in main.js");

    // 批量更新所有my-element
    document.querySelectorAll('my-element').forEach(el => {
      const contentId = el.dataset.contentId;
      el.useData(config[contentId]);
    });

    // 批量更新所有another-element
    document.querySelectorAll('another-element').forEach(el => {
      const contentId = el.dataset.contentId;
      el.useData(config[contentId]);
    });
  } catch (error) {
    console.error('Error:', error);
  }
};

init();

修改MyElement.js：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.config = null;
    console.log("constructor");
  }

  useData(prop) {
    this.config = prop;
    console.log("useData", prop);
    this.render();
  }

  render() {
    if (!this.config) return;
    this.innerHTML = `
      <div>
        ${this.config.title || 'No content'}
      </div>
    `;
  }

  connectedCallback() {
    console.log("connected callback");
    // 初始渲染加载状态
    this.innerHTML = `<div>Loading...</div>`;
  }
}

window.customElements.define('my-element', MyElement);
export default MyElement;

方案3：用Promise缓存数据，元素等待数据就绪

核心逻辑：将数据加载的Promise封装在独立模块中，自定义元素在connectedCallback中等待Promise完成后再获取数据，实现数据与元素的解耦。

创建data-service.js：

// 缓存数据加载的Promise，供所有自定义元素共享
export const configPromise = fetch("/config.json")
  .then(res => res.json())
  .catch(err => {
    console.error('Failed to load config:', err);
    throw err;
  });

修改main.js：

import "./custom-elements/MyElement.js";
import "./custom-elements/AnotherElement.js";
import { configPromise } from "./data-service.js";

const init = async () => {
  try {
    await configPromise;
    console.log("[Main] app initiated in main.js");
  } catch (error) {
    console.error('Error:', error);
  }
};

init();

修改MyElement.js：

import { configPromise } from "../data-service.js";

class MyElement extends HTMLElement {
  constructor() {
    super();
    console.log("constructor");
  }

  async connectedCallback() {
    console.log("connected callback");
    this.innerHTML = `<div>Loading...</div>`;
    
    try {
      const config = await configPromise;
      const contentId = this.dataset.contentId;
      const itemData = config[contentId];
      
      if (itemData) {
        this.useData(itemData);
      }
    } catch (err) {
      this.innerHTML = `<div>Failed to load content</div>`;
    }
  }

  useData(prop) {
    console.log("useData", prop);
    this.innerHTML = `
      <div>
        ${prop.title || 'No content'}
      </div>
    `;
  }
}

window.customElements.define('my-element', MyElement);
export default MyElement;

方案选择建议 #

• 方案1：适合数据必须完全加载后才能渲染元素的场景，确保元素实例化时数据已就绪
• 方案2：适合需要展示加载状态、希望数据加载与元素初始化并行的场景
• 方案3：适合模块化程度高、多个自定义元素需要共享同一份异步数据的场景

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