Web Component无法追加HTML？自定义组件onInput不更新原因排查

咱们先来说说为什么你的组件看起来没“更新”：
你写的onInput函数其实是能正常触发的，但问题出在DOM操作上——每次输入你都会创建一个新的<span>并追加到#mydiv里，而不是替换掉已有的计数元素。这就导致页面上会堆一堆重复的文本（比如输入到第5个字符时，页面上会有1/255、2/255…一直到5/255的一堆span），不是没有更新，而是更新的方式不对，你可能没注意到这些重复的元素。

另外还有个坑：你用了全局的onInput函数，还通过内联oninput属性绑定它。这种方式在Web Component里非常不推荐——要是页面上有多个MainDiv组件，全局函数会被共用，很容易出bug；要是以后组件改用Shadow DOM，内联事件直接会因为作用域问题失效。

接下来聊聊给Web Component追加/更新HTML的正确姿势，核心思路是把逻辑封装在组件内部，别依赖全局变量或函数：

方案1：不使用Shadow DOM（适配你当前的代码结构） #

把事件绑定和DOM更新都放到组件类里，复用同一个计数元素，而不是重复创建：

class MainDiv extends HTMLElement {
  constructor() {
    super();
    this.countLabel = null; // 提前存好计数元素的引用，方便后续更新
  }

  connectedCallback() {
    // 用模板字符串写HTML，不用转义字符，可读性拉满
    this.innerHTML = `
      <div id="mydiv">
        <input type="text" />
      </div>
    `;
    // 找到输入框，用addEventListener绑定事件（拒绝内联事件！）
    const input = this.querySelector('input');
    input.addEventListener('input', (event) => this.handleInput(event));
    
    // 一次性创建计数元素并加到div里
    this.countLabel = document.createElement('span');
    this.querySelector('#mydiv').appendChild(this.countLabel);
  }

  handleInput(event) {
    // 直接更新已有span的内容，而不是每次新建
    this.countLabel.textContent = `${event.target.value.length}/255`;
  }
}

// 别忘了注册组件，不然浏览器不认
customElements.define('main-div', MainDiv);

这样每次输入都会实时更新同一个span的文本，你就能看到正确的计数变化了。

方案2：使用Shadow DOM（Web Component标准推荐写法） #

Shadow DOM能让组件的DOM和全局DOM完全隔离，避免样式、元素冲突，是Web Component的核心玩法：

class MainDiv extends HTMLElement {
  constructor() {
    super();
    // 开启Shadow DOM模式
    this.attachShadow({ mode: 'open' });
    this.countLabel = null;
  }

  connectedCallback() {
    // 在Shadow根里构建组件的内部DOM
    this.shadowRoot.innerHTML = `
      <div id="mydiv">
        <input type="text" />
      </div>
    `;
    const input = this.shadowRoot.querySelector('input');
    input.addEventListener('input', (event) => this.handleInput(event));
    
    this.countLabel = document.createElement('span');
    this.shadowRoot.querySelector('#mydiv').appendChild(this.countLabel);
  }

  handleInput(event) {
    this.countLabel.textContent = `${event.target.value.length}/255`;
  }
}

customElements.define('main-div', MainDiv);

这种写法下，组件的DOM完全被封装在Shadow根里，不会和页面上的其他元素互相干扰，是更专业的Web Component实现方式。

最后再划个重点：

• 你之前的“未更新”是重复添加元素导致的，复用DOM元素就能解决
• 别用全局函数和内联事件，把逻辑封装在组件内部才是靠谱的做法
• Shadow DOM是Web Component的推荐实践，能帮你更好地封装组件

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