I need help applying CSS to elements that I dynamically created using JavaScript.
buttonClicked(event) {
console.log(event);
let x = event.clientX - event.target.offsetLeft;
let y = event.clientY - event.target.offsetTop;
let ripples = document.createElement("span");
console.log(ripples);
ripples.style.left = x + "px";
ripples.style.top = y + "px";
document.getElementById("btn").appendChild(ripples);
}
This function is triggered when a user clicks on a button. I am trying to add CSS styles to the <span> element created within this method.
The CSS for the <span> element does not apply when using scoped CSS. However, it works without the scoped keyword.
I searched online and came across this resource. It suggests using /deep/ or >>> operator to target span elements, but that doesn't solve my issue.
Here's the CSS code:
button >>> span {
z-index: 3;
position: absolute;
background: white;
transform: translate(-50%, -50%);
pointer-events: none;
border-radius: 50%;
animation: animate 1s linear infinite;
}