I want to target sdf-carousel-item that has an ID of "first" and only when class of "active" is present. However this is a carousel - so when the first slide is showing, the class of "active" is added. when someone goes to slide 2 for example, the "active" gets removed on the first slide, and added to the second slide.
To start I just want to target the "active" and this is what so far (check code snippet).
const carouselModal = document.querySelector("sdf-carousel-item");
if(carouselModal.matches("#first.active")){
console.log("carousel one is active");
}
<sdf-carousel-item id="first" style="height: auto; display: block; width: 50%;" role="group" aria-roledescription="slide" aria-label="1 of 2" class="first-in-page last-in-page active">test one</sdf-carousel-item>
Yes on the code snippet it works great. but I think the problem is that this class of "active" is added AFTER page load, so it's not working when i try it inside the actual page.
SO the, I tried to wrap the entire function around window.addEventListener("load", function(){} but that didn't do anything. Any reason why that didn't work? Is there a better alternative?