По какой-то причине при изменении списка классов некоторых HTML элементов изменения не сохраняются.
Пример:
<div class="card blue-grey darken-1" id="cardId">...</div>
<script>
let el = document.getElementById('cardId');
//el.classList.remove('darken-1');//Данная строка удалит класс из элемента "cardId"
let card = new UiBilder({ element: 'cardId' });
card.classes.del('darken-1');//Эта строка повлечет вызов метода apply для "cardId"
...
apply (element) {
...
console.log(element == document.getElementById('cardId'));//true
console.log('del', entity, element.classList);//del darken-1 DOMTokenList(3) ["card", "blue-grey", "darken-1", value: "card blue-grey darken-1"]
element.classList.remove(entity);
console.log('after del', element.classList);//after del DOMTokenList(2) ["card", "blue-grey", value: "card blue-grey"]
...
}
...
console.log(card.element.classList)//DOMTokenList(3) ["card", "blue-grey", "darken-1", value: "card blue-grey darken-1"]
</script>
Как видно из последнего лога, класс darken-1
вернулся, хотя других операций по изменению списка не производилось. Такое же поведение проявляется при добавлении класса.
Вопрос: в чем причина такого поведения списка классов и как это исправить?
Тестовая страница воспроизводящая данное поведение: test.html