展示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>