展示WebComponent中的子元素的方法

Question

我正在尝试将一个React组件重建为WebComponent，以便摆脱对React的依赖。

我希望在HTML中看到一个像这样的WebComponent：

<editable-h1>Hello, world</editable-h1>

它应该呈现如下：

<span>
  <h1>Hello, world</h1>
  <button onClick=this.onEdit>Edit</button>
</span>

如果我点击编辑按钮，我希望它呈现如下：

<form>
  <input type='text' value='Hello, world'></input>
  <button onClick=this.onSave>Save</button>
</form>

点击保存按钮会通过API调用将更改保存到数据库，并返回到原始呈现（但文本已经被编辑过）。

我相信我可以处理切换呈现和进行API调用，但我困惑的是如何从初始的WebComponent中获取子元素文本“Hello, world”以便进行呈现。

Answer 1

在开标签<editable-h1>上触发connectedCallback事件

所以你的Hello World的innerHTML还没有被解析

要等到解析完成后再执行，使用setTimeout

注意：所有提供parsedCallback的工具和库都会在底层使用类似的技巧，使用requestAnimationFrame或MutationObserver（还有更多代码行）。

如果你认为一行setTimeout是一个hack，或者你不想使用setTimeout浪费那一毫秒，可以查看Andrea Giammarchi的html-parsed-element代码
（当然需要加载和解析，还会增加依赖和代码复杂性，所以总体需要更多时间）

并且关注WC专家，这个讨论还在继续：
需要一个回调函数来在子元素改变或解析完成后执行 https://github.com/WICG/webcomponents/issues/809

所有方法归结为同一个目标：等待事件循环为空

什么是事件循环？https://www.youtube.com/watch?v=8aGhZQkoFbQ

customElements.define("editable-h1", class extends HTMLElement {
  connectedCallback() {
    setTimeout(() => {
      this.innerHTML = `<h1>${this.innerHTML}</h1><button>Edit</button>`;
      
      let h1     = this.querySelector("h1");
      let button = this.querySelector("button");
      
      button.onclick = (evt) => {
        button.innerHTML = (h1.contentEditable = !h1.isContentEditable) 
                              ? (h1.focus(),"Save")
                              : "Edit";
      }
      
    });
  }
});

<editable-h1>Hello World!</editable-h1>

<editable-h1>Hello Web Components World!</editable-h1>