Vanilla JS中如何以编程方式渲染Web组件为其他组件的子组件？

问题根源 #

你当前的问题出在组件生命周期的执行顺序：

• 调用new ReasonItem()时，构造器自动执行，如果构造器里直接调用了render()，此时reason属性还未设置，导致渲染出"unidentified"
• 后续设置child.reason = reason时，即使触发了render()，但通过outerHTML获取的是组件初始化时的序列化结果，并未同步最新的渲染内容

正确实现方案 #

第一步：重构ReasonItem组件 #

调整组件的生命周期逻辑，避免在构造器中直接渲染，改为通过属性变更或挂载时触发渲染：

class ReasonItem extends HTMLElement {
  static get elementName() {
    return 'reason-item';
  }

  constructor() {
    super();
    // 构造器只做初始化，不调用render
    this._reason = null;
  }

  // 定义reason的setter，设置时触发渲染
  set reason(value) {
    this._reason = value;
    this.render();
  }

  get reason() {
    return this._reason;
  }

  // 组件挂载到DOM时触发，确保首次渲染
  connectedCallback() {
    if (this._reason) {
      this.render();
    }
  }

  render() {
    if (!this._reason) return;
    this.innerHTML = `
      <div>
        <h3>${this._reason.Name}</h3>
        <p>${this._reason.Description}</p>
      </div>
    `;
  }
}

customElements.define(ReasonItem.elementName, ReasonItem);

第二步：优化父组件的render方法 #

不要通过拼接outerHTML生成字符串，而是直接创建组件实例并挂载到DOM，这样能正确触发组件的生命周期：

render() {
  // 先清空当前内容
  this.innerHTML = '';
  
  this.data.forEach(reason => {
    const child = new ReasonItem();
    child.reason = reason;
    this.appendChild(child);
  });
}

可选：如果坚持使用innerHTML拼接 #

如果一定要用字符串拼接的方式，需要确保组件在设置属性后，outerHTML能同步最新渲染结果。可以在设置属性后手动触发render()，然后获取outerHTML：

render() {
  this.innerHTML = `
    ${this.data.map(reason => {
      const child = new ReasonItem();
      child.reason = reason;
      // 手动触发渲染后再取outerHTML
      child.render();
      return child.outerHTML;
    }).join('')}
  `;
}

但这种方式不如直接挂载组件实例可靠，因为outerHTML会序列化组件的当前状态，但组件并未经过完整的生命周期（比如connectedCallback不会触发），如果组件依赖挂载后的逻辑，会出现问题。

核心原则 #

• 构造器只做轻量初始化，不要执行DOM渲染或依赖外部属性的逻辑
• 利用属性的setter监听数据变化，触发视图更新
• 组件挂载到DOM时（connectedCallback）执行首次渲染，确保DOM环境可用

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