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>