构建可编辑WebComponent：如何获取初始子元素文本？

要获取<editable-h1>初始的子元素文本，你可以利用WebComponent的connectedCallback生命周期钩子，结合DOM API实现，具体操作如下：

• 读取初始文本：
  组件挂载到DOM时会触发connectedCallback，此时直接通过this.textContent就能获取组件内部的文本内容，建议调用trim()去除首尾空白字符，避免渲染时出现多余空格。把读取到的文本存到组件实例的属性中（比如this.currentText），后续渲染都基于这个属性的值。

• 示例实现代码：

  class EditableH1 extends HTMLElement {
    constructor() {
      super();
      this.currentText = '';
      this.isEditing = false;
    }
  
    connectedCallback() {
      // 读取并保存初始文本
      this.currentText = this.textContent.trim();
      this.render();
    }
  
    // 渲染切换逻辑
    render() {
      if (this.isEditing) {
        this.innerHTML = `
          <form>
            <input type='text' value='${this.currentText}'>
            <button type='button' onclick='this.closest("editable-h1").onSave()'>Save</button>
          </form>
        `;
      } else {
        this.innerHTML = `
          <span>
            <h1>${this.currentText}</h1>
            <button type='button' onclick='this.closest("editable-h1").onEdit()'>Edit</button>
          </span>
        `;
      }
    }
  
    onEdit() {
      this.isEditing = true;
      this.render();
    }
  
    async onSave() {
      const input = this.querySelector('input');
      const newText = input.value.trim();
      // 执行你的API保存逻辑
      // await fetch('/api/save', { method: 'POST', body: JSON.stringify({ text: newText }) });
      this.currentText = newText;
      this.isEditing = false;
      this.render();
    }
  }
  
  customElements.define('editable-h1', EditableH1);
  

• 额外说明：

  • 如果组件初始内容包含嵌套元素而非纯文本，可以改用this.innerText提取可见文本，或者遍历子节点手动收集文本；但根据你的需求，纯文本场景下textContent完全够用。
  • 更新组件内容时用innerHTML会替换原有子元素，所以必须提前把初始文本存到实例属性里，不能依赖后续读取组件内部的文本。

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