Actualmente estoy renderizando un componente en Vanilla JS llamando a un método adjunto a una clase donde se define y devuelve el componente.
class ToastNotification { constructor(paramsObj) { this.notificationType = paramsObj.notificationType || "info"; this.notificationAction = paramsObj.notificationAction || "none"; this.title = paramsObj.title || "Something happened"; this.message = paramsObj.message || `Here's some more specific information on what happened`; } getHtml() { return ` <div class="toastNotification notification_${this.notificationType} ${this.enableAnimations()}" > <div class="notification_icon"> <ion-icon name="${this.icon}"></ion-icon> </div> <div class="notification_text"> <p class="text_title">${this.title}</p> <p class="text_message">${this.message}</p> <p class="text_time">${this.timeSinceNotification()}</p> </div> <div class="notification_close"> <ion-icon name="close" onclick="this.closest('.toastNotification').remove()"></ion-icon> </div> </div> `; } }Pero, ¿cómo puedo agregar un evento de escucha o establecer un tiempo de espera para realizar una acción en el componente, después de haber llamado al método getHTML() para representar el elemento?
Como me gustaría poder establecer un tiempo de espera para que el elemento renderizado desaparezca después de X cantidad de tiempo y agregar un detector de eventos para habilitar diferentes acciones cuando se hace clic en él. Pero estoy abierto a alternativas si pueden hacer el mismo trabajo.
El mejor resultado que he encontrado hasta ahora es usar MutationObserver.
const observer = new MutationObserver((change) => { change[0].addedNodes.forEach( newNode => { if (newNode.tagName == 'DIV' && newNode.classList.contains('toastNotification')) { // Add listeners or do an action } }); });Y luego adjuntando el observador al documento HTML, o al cuerpo
observer.observe(document.querySelector('html'), {attributes: false, childList: true, subtree: true,});