In my astro file in a script tag I have the following code:

      // create grid of days
      let daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate()
      let week = document.createElement('div')
      week.classList.add('calendar-day-numbers-row')

      for (let i = 1; i <= daysInMonth; i++) {
        let day = document.createElement('span')
        day.classList.add('calendar-day-number')
        day.innerText = i.toString()
        i == currentDay && day.classList.add('calendar-day-number--current')
        week.append(day)

        if (
          new Date(currentYear, currentMonth, i).getDay() == 6 ||
          i == daysInMonth
        ) {
          document.querySelector('.calendar-day-numbers')?.append(week)

          if (i != daysInMonth) {
            week = document.createElement('div')
            week.classList.add('calendar-day-numbers-row')
          }
        }

As you can see week and day are dynamically created elements and then the classes calendar-day-numbers-row and calendar-day-number are added to week and day respectively

I have styles for those classes in a style tag but only the styles applied to existing static HTML is used.

A look at devtools in the elements tags show that the static HTML have some data attributes that the dynamic elements do not. My guess is this is why the styles are not being applied. Anyway I can fix this issue?