Maison > Questions et réponses > le corps du texte
P粉0943518782023-09-05 00:37:47
Tags ouverts sur <editable-h1>
上触发connectedCallback
événements
Donc, le Hello World
innerHTML 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
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>🎜