Methode zum Anzeigen untergeordneter Elemente in WebComponent

Question

Ich versuche, eine React-Komponente in eine WebComponent umzuwandeln, um die Abhängigkeit von React zu beseitigen.

Ich würde gerne eine WebComponent wie diese in HTML sehen:

<editable-h1>Hallo Welt</editable-h1>

Es sollte so aussehen:

<span>
  <h1>Hallo Welt</h1>
  <button onClick=this.onEdit>Bearbeiten</button>
</span>

Wenn ich auf die Schaltfläche „Bearbeiten“ klicke, möchte ich, dass es so aussieht:

<form>
  <input type='text' value='Hallo Welt'></input>
  <button onClick=this.onSave>Speichern</button>
</form>

Durch Klicken auf die Schaltfläche „Speichern“ werden die Änderungen über einen API-Aufruf in der Datenbank gespeichert und zur ursprünglichen Darstellung zurückgekehrt (jedoch mit bereits bearbeitetem Text).

Ich glaube, dass ich mit dem Umschalten des Renderings und dem Durchführen von API-Aufrufen zurechtkomme, aber was mich verwirrt, ist, wie ich den Text des untergeordneten Elements „Hello, world“ aus der ursprünglichen WebComponent abrufen kann, um ihn zu rendern.

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>