Kaedah untuk memaparkan elemen kanak-kanak dalam WebComponent

Question

Saya cuba membina semula komponen React ke dalam WebComponent untuk menghilangkan pergantungan pada React.

Saya ingin melihat WebComponent seperti ini dalam HTML:

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

Ia sepatutnya kelihatan seperti ini:

<span>
  <h1>Helo, dunia</h1>
  <butang onClick=this.onEdit>Edit</button>
</span>

Jika saya mengklik butang edit, saya mahu ia kelihatan seperti ini:

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

Mengklik butang Simpan akan menyimpan perubahan pada pangkalan data melalui panggilan API dan kembali ke pemaparan asal (tetapi dengan teks sudah diedit).

Saya percaya saya boleh mengendalikan penukaran pemaparan dan membuat panggilan API, tetapi apa yang saya keliru ialah cara mendapatkan teks elemen kanak-kanak "Hello, dunia" daripada WebComponent awal untuk dipaparkan.

Answer 1

Buka tag pada <editable-h1>上触发connectedCallbackacara

Jadi Hello World innerHTML anda belum dihuraikan lagi

Untuk menunggu sehingga penghuraian selesai sebelum melaksanakan, gunakan setTimeout

NOTA: Semua disediakan parsedCallback的工具和库都会在底层使用类似的技巧，使用requestAnimationFrame或MutationObserver (dan lebih banyak baris kod).

Jika anda rasa satu baris setTimeout是一个hack，或者你不想使用setTimeout adalah satu penggodaman, atau anda tidak mahu membazirkan milisaat itu menggunakan , anda boleh menyemak Kod elemen html-parsed-elemen Andrea Giammarchi

(Sudah tentu ia memerlukan pemuatan dan penghuraian, yang juga meningkatkan kebergantungan dan kerumitan kod, jadi ia memerlukan lebih banyak masa secara keseluruhan)

Dan ikuti pakar WC, perbincangan ini diteruskan: Memerlukan fungsi panggil balik untuk dilaksanakan selepas elemen anak berubah atau penghuraian selesai https://github.com/WICG/webcomponents/issues/809

Semua kaedah bermuara kepada matlamat yang sama: Tunggu sehingga gelung acara kosong

Apakah gelung acara? 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>

🎜