упрощённая версия (работает и в Firefox)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Stoke&display=swap');
dialog {
padding: .5em;
border-radius: 0.6rem;
box-shadow: 0 0 1em black;
width: 150px;
height: 35px;
display: grid;
place-content: center;
font: 900 1.8em / 24px "Stoke", sans-serif;
}
</style>
</head>
<body>
<ul>
<li>red</li>
<li>green</li>
<li>yellow</li>
<li>coral</li>
<li>gray</li>
<li>violet</li>
</ul>
<script>
let liArr = document.getElementsByTagName('li');
async function bg(list) {
let modal = document.createElement('dialog');
document.body.append(modal);
modal.setAttribute('open','open');
for (const li of list)
await new Promise(resolve => {
const {textContent : color} = li;
li.style.backgroundColor = modal.textContent = modal.style.color = color;
modal.addEventListener('click', resolve, {once: true});
});
modal.remove()
}
bg(liArr)
</script>
</body>
</html>