I'm working on a school project based on WebComponents where we have to draw a calendar (I just hardcoded it) and we have to pass a value (the day of the month) on the HTML tag, just like this:

<calendar-sheet day=1></calendar-sheet>

I want to apply a specific CSS class (.active) to the same day that is passed. For example, if I write day=10, I want to apply that class to the tenth day of the month. I have added a specific ID for every day in order to identify the days, like this:

<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>

I tried to do the following, but I am stuck here:

selectDay(){
   this.renderRoot.getElementById(this.day).classList.add('active')
}