Méthode pour afficher les éléments enfants dans WebComponent

Question

J'essaie de reconstruire un composant React en WebComponent afin de me débarrasser de la dépendance à React.

J'aimerais voir un WebComponent comme celui-ci en HTML :

<editable-h1>Bonjour tout le monde</editable-h1>

Cela devrait ressembler à ceci :

<span>
  <h1>Bonjour tout le monde</h1>
  <button onClick=this.onEdit>Modifier</button>
</span>

Si je clique sur le bouton Modifier, je souhaite qu'il apparaisse comme ceci :

<form>
  <input type='text' value='Bonjour tout le monde'></input>
  <button onClick=this.onSave>Enregistrer</button>
</form>

Cliquer sur le bouton Enregistrer enregistrera les modifications apportées à la base de données via un appel API et reviendra au rendu d'origine (mais avec le texte déjà modifié).

Je pense que je peux gérer le changement de rendu et les appels d'API, mais ce qui me rend confus, c'est comment obtenir le texte de l'élément enfant "Bonjour tout le monde" à partir du composant Web initial afin d'effectuer le rendu.

Answer 1

Tags ouverts sur <editable-h1>上触发connectedCallbackévénements

Donc, le Hello WorldinnerHTML de votre n'a pas encore été analysé

Pour attendre que l'analyse soit terminée avant de l'exécuter, utilisez setTimeout

REMARQUE : Tout est fourni parsedCallback的工具和库都会在底层使用类似的技巧，使用requestAnimationFrame或MutationObserver (et plus de lignes de code).

Si vous pensez qu'une ligne setTimeout是一个hack，或者你不想使用setTimeout est un hack, ou si vous ne voulez pas perdre cette milliseconde en utilisant , vous pouvez consulter le code d'élément html-parsed d'Andrea Giamarchi

(Bien sûr, cela nécessite un chargement et une analyse, ce qui augmente également les dépendances et la complexité du code, donc cela prend globalement plus de temps)

Et suivez les experts WC, cette discussion continue : Besoin d'une fonction de rappel à exécuter une fois l'élément enfant modifié ou l'analyse terminée https://github.com/WICG/webcomponents/issues/809

Toutes les méthodes se résument au même objectif : Attendre que la boucle d'événement soit vide

Qu'est-ce que la boucle événementielle ? 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>

🎜