Me encontré con un problema en el que los elementos que se agregan con Javascript ignoran todos los estilos.

En este caso específico, tengo botones en los que quiero tener efectos dominó al hacer clic en el código que funciona de la siguiente manera:

Obtuve elementos en mi HTML con el material-button clase

Después de cargar los elementos, se ejecutará el siguiente código:

 mounted() { // To make sure the code runs after the elements are rendered i used $nextTick this.$nextTick(() => { function createRipple(event) { const button = event.currentTarget; const circle = document.createElement("span"); const diameter = Math.max(button.clientWidth, button.clientHeight); const radius = diameter / 2; circle.style.width = circle.style.height = `${diameter}px`; circle.style.left = `${event.clientX - (button.offsetLeft + radius)}px`; circle.style.top = `${event.clientY - (button.offsetTop + radius)}px`; circle.classList.add("ripple"); const ripple = button.getElementsByClassName("ripple")[0]; if (ripple) { ripple.remove(); } button.appendChild(circle); } const buttons = document.querySelectorAll(".material-button"); for (const button of buttons) { button.addEventListener("click", createRipple); } }) }

Pensé que era porque el estilo estaba dentro de una etiqueta <style> con alcance, así que probé lo siguiente:

• Agregué el estilo a una etiqueta <style> sin el atributo de alcance a mi componente
• Agregué el estilo a una etiqueta <style> sin el atributo de alcance a mi predeterminado.vue
• Agregué el estilo a mi global.scss

Ninguno de estos intentos me ha funcionado. Sin embargo, estoy bastante seguro de que el estilo se ignora y que mi problema no se debe a otro lugar, porque el elemento de ondulación se adjunta como lo demuestra esta captura de pantalla:

Sin embargo, puedo ver que span.ripple no se encuentra en ninguna parte del estilo: