Неожиданное поведение с onanimationend в JavaScript – продолжение ⇐ CSS

[Anonymous]

Это продолжение этого вопроса вместе с принятым ответом.
На этот раз есть еще один уровень списка и список элемент стиля также выделен.
Пожалуйста, взгляните на этот фрагмент кода:

Код: Выделить всё

const highlight = (element) => {
element.classList.remove('highlight');
setTimeout(() => {
element.classList.add('highlight');
}, 0);
element.onanimationend = e => {
e.stopPropagation();
element.classList.remove('highlight');
}
}
document.querySelector('body').addEventListener('click', event => {
if (event.target.hash) {
const element = document.querySelector(event.target.hash);
highlight(element);
}
});

Код: Выделить всё

ol {
counter-reset: enumeration;
list-style: none;
}

ol > li {
position: relative;
}

ol > li::before {
position: absolute;
margin-left: -2em;
width: 1em;
counter-increment: enumeration;
content: counter(enumeration) '.';
}

ol > li > ol {
counter-reset: alphabet;
list-style: none;
}

ol > li > ol > li {
position: relative;
}

ol > li > ol > li::before {
position: absolute;
margin-left: -2em;
width: 1em;
counter-increment: alphabet;
content: counter(alphabet, lower-alpha) ')';
}

@keyframes highlight {
from {
background: red;
}
to {
background: transparent;
}
}

div.highlight,
ol > li.highlight,
ol > li.highlight::before,
ol > li:has(.highlight)::before {
animation: highlight 5s;
}

Код: Выделить всё

[list]
[*]
[url=#foo]Foo[/url]



[url=#foo-1]Foo 1[/url]

[url=#foo-1-1]Foo 1.1[/url]
[*][url=#foo-1-2]Foo 1.2[/url]
[*][url=#foo-1-3]Foo 1.3[/url]
[/list]

[*][url=#foo-2]Foo 2[/url]
[*][url=#foo-3]Foo 3[/url]



[*][url=#bar]Bar[/url]
[*][url=#baz]Baz[/url]




Foo
[list]
[*]
Foo 1

Foo 1.1
[*]Foo 1.2
[*]Foo 1.3
[/list]

[*] Foo 2
[*] Foo 3


Bar

Baz

Затем запустите фрагмент кода (желательно на всю страницу) и попробуйте:
Нажмите «Foo 1.1» (или «Foo 1.2» или «Foo 1.3»), подождите 3 секунды, а затем нажмите «Foo». Как видите, анимация цвета фона «Foo» заканчивается одновременно с анимацией цвета фона «Foo 1.1» (или «Foo 1.2» или «Foo 1.3»). Можно также сказать, что CSS-класс «highlight» удален из «Foo» слишком рано.
Более того, если вы изначально нажмете «Foo 1.1» (или «Foo 1.2» или « Foo 1.3"), элемент стиля списка "Foo" выделяется, как и ожидалось (и задумано). Но если вы затем нажмете на другой «Foo 1.x» в течение 5 секунд, элемент стиля списка «Foo» не снова подсветится. Только после ожидания не менее 5 секунд и повторного нажатия «Foo 1.1» (или «Foo 1.2» или «Foo 1.3») элемент стиля списка «Foo» снова выделяется.
Это странное поведение может быть связано с псевдоэлементом ::before. Итак, речь идет о ol > li:has(.highlight)::before. stopPropagation(), похоже, не влияет на псевдоэлементы, поскольку они не являются частью реального DOM.
Есть идеи, как это исправить?

Подробнее здесь: https://stackoverflow.com/questions/791 ... -follow-up