Mi pregunta es simple; ¿Por qué mis estilos de clase no se aplican a los elementos creados dinámicamente?

Estoy creando una barra de búsqueda aquí donde genero un resultado coincidente de li per y lo agrego a mi ul. Cuando inspecciono la página, veo que las clases se aplican correctamente a los li, pero los estilos de la clase en sí no están presentes. Codifiqué un li de prueba y tenía los estilos esperados. ¿Qué me estoy perdiendo aquí para que mis estilos se apliquen a estos elementos generados dinámicamente? ¿Seguramente no tengo que asignar todos los estilos para los li en mi texto mecanografiado? Cualquier explicación sería genial, ¡gracias a todos! (:

Mi HTML:

 <div class="section"> <h2>Step 1: Choose an Identity Provider (IDP)</h2> <div class="search"> <input class="focusable" (focusout)="handleFocusOut()" (input)="debounce(search, 300, $event)" placeholder="Select Identity Provider" autocomplete="off" /> <i class="icon fas fa-search"></i> <ul id="search-options"> <li class="focusable testing">IMG Salesforce</li> </ul> </div> <!-- <i class="fa fa-plus"></i>--> </div>

Mi scss:

 .section { ... .search { position: relative; width: 300px; .icon { position: absolute; right: 5px; top: 3px; } input { width: 300px; } ul { color: red; li { cursor: pointer; &:hover { background-color: grey; color: red; } .testing { cursor: pointer; &:hover { background-color: grey; color: red; } } } } } }

Mi TS:

 let ul = document.getElementById('search-options'); this.displayServices.forEach((service) => { let li = document.createElement('li'); li.classList.add('focusable', 'testing'); li.addEventListener('focusout', this.handleFocusOut); const img = document.createElement('img'); img.src = this.getImgUrl(service); img.width = 20; img.height = 20; img.style.margin = '0 10px'; li.innerHTML = `${service.name}`; li.style.display = 'flex'; li.style.alignItems = 'center'; li.style.border = '.5px solid black'; li.style.padding = '8px 0'; li.prepend(img); ul.appendChild(li); });