Vanilla JS自定义组件中innerHTML赋值报错：Cannot set properties of null

我正在开发一个Vanilla JS自定义组件，尝试使用innerHTML修改render方法生成的HTML中指定ID元素的文本，但出现了Cannot set properties of null (setting 'innerHTML')错误。我感到困惑的是，目标元素的ID确实存在，且要传入innerHTML的字符串并非null类型。相关代码如下：

class checkoutitemC extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback(){
    const itemName = this.getAttribute('name');
    document.getElementById("nameX").innerHTML=`${itemName}`;
    const price = this.getAttribute('price');
    document.getElementById("priceX").innerHTML=`$${price}`;
    const qty = this.getAttribute('qty');
    document.getElementById("qtyX").innerHTML=`Qty: ${qty}`;
    this.render()
  }
  render(){
    this.innerHTML=`
<li class="list-group-item d-flex justify-content-between lh-condensed">
  <div>
    <h6 class="my-0" id="nameX"></h6>
    <small class="text-muted" id="qtyX"></small>
  </div>
  <span class="text-muted" id="priceX"></span>
</li>
    `
  }
}

我已检查输入类型无问题，且在单独的HTML文件中测试innerHTML和getElementById可正常工作，推测是组件结构导致该问题。请问这种异常行为的潜在原因有哪些？

核心原因 #

• DOM元素未生成就执行操作：connectedCallback中先调用document.getElementById查找元素，但此时render()还没执行，组件的HTML还未插入到DOM中，自然找不到目标元素，触发null错误。
• 全局ID冲突隐患：即便调整执行顺序，document.getElementById是全局范围查找，若页面存在多个该组件实例，重复的ID会导致仅能找到第一个匹配元素，其他实例的内容更新会出错。

修正后的代码 #

先执行render()生成组件DOM，再在组件内部查找元素（避免全局查找）：

class checkoutitemC extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback(){
    this.render(); // 先渲染组件HTML
    // 在组件内部定位元素，规避全局ID冲突
    const itemName = this.getAttribute('name');
    this.querySelector("#nameX").innerHTML = `${itemName}`;
    const price = this.getAttribute('price');
    this.querySelector("#priceX").innerHTML = `$${price}`;
    const qty = this.getAttribute('qty');
    this.querySelector("#qtyX").innerHTML = `Qty: ${qty}`;
  }
  render(){
    this.innerHTML=`
<li class="list-group-item d-flex justify-content-between lh-condensed">
  <div>
    <h6 class="my-0" id="nameX"></h6>
    <small class="text-muted" id="qtyX"></small>
  </div>
  <span class="text-muted" id="priceX"></span>
</li>
    `
  }
}
// 注册自定义组件
customElements.define('checkout-item', checkoutitemC);

额外优化建议 #

• 替换ID为类选择器：ID在页面中需唯一，多组件实例会引发冲突，建议把id="nameX"改为class="nameX"，用this.querySelector(".nameX")查找元素。
• 直接在render中插入属性值：减少后续DOM操作，代码更简洁，示例如下：

render(){
  const itemName = this.getAttribute('name') || '';
  const price = this.getAttribute('price') || 0;
  const qty = this.getAttribute('qty') || 0;
  this.innerHTML=`
<li class="list-group-item d-flex justify-content-between lh-condensed">
  <div>
    <h6 class="my-0">${itemName}</h6>
    <small class="text-muted">Qty: ${qty}</small>
  </div>
  <span class="text-muted">$${price}</span>
</li>
  `
}

这样无需额外查找和修改DOM，直接在渲染时注入数据，避免相关问题。

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