I’ve run into an issue where elements that get appended with Javascript ignore all styling.
In this specific case I’ve got buttons where I want to have ripple effects uppon clicking the code works as following:
I got elements in my HTML with the class material-button
After the elements are loaded the following code will be executed:
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);
}
})
}I thought it was because the styling was inside a scoped <style> tag so I tried the following things:
- I added the styling to a
<style>tag without the scope attribute to my component - I added the styling to a
<style>tag without the scope attribute to my default.vue - I added the styling to my global.scss
None of these attempts have worked for me. I’m pretty sure however that the styling is indeed ignored and that my problem is not caused somewhere else, because the ripple element is infact appended as proven by this screenshot:
However i can see that span.ripple is nowhere to be found in the styling:
