Не применяются стили при использовании appendChild

Всем привет! Есть код, формирующий некоторое кол-во li в ul посредством <template> и appendChild. Когда запускаю, обнаруживаю, что элементы списка выстроились не так, как они стояли захардкоженными. Помогите разобраться, что к чему и как восстановить работу стилей при иcпользовании <template> и appendChild.
Пример HTML:

<ul class="persons__list">
  <li class="persons__item"><a class="persons__link" href="*">пример</a></li>
</ul>
<!--  -->
<template class="template__user-item">
  <li class="persons__item"><a class="persons__link" href="*">пример</a></li>
</template>

Пример js:

const personsContainer = document.querySelector('.persons__list');
const personTemplate = document.querySelector('.template__user-item');
    
function createElem() {
  const elem = personTemplate.content.querySelector('.persons__item').cloneNode(true);
  return elem
}
    
function filling() {
  personList.forEach((item) => {
    const temp = createElem()
    temp.innerHTML = `<a class="persons__link" href="${item.id}">${item.user}</a>`
    temp.id = item.id
    renderElems(temp)
  })
}
    
function renderElems(elem) {
  personsContainer.appendChild(elem)
}
    
filling()

Пример стилей:

.persons__list {
    list-style: none;
    font-family: 'Raleway-regular', verdana, sans-serif;
    font-weight: 200;
    font-size: 18px;
    line-height: 1.9;
    word-spacing: 25px;
}

.persons__item {
    display: inline;
    text-align: center;
    align-items: center;
}

В итоге получается то, что на скриншоте...