Andriy_co2020k29z8d23,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>
<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);
dialogPolyfill.registerDialog(modal);
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', () => {modal.close();resolve()}, {once: true});
modal.showModal();
});
modal.remove()
}
bg(liArr)
</script>
</body>
</html>