確認した環境

Google Chrome Version 93.0.4577.63 (Official Build) (64-bit)
今回、試した記述方法が、あらゆる環境で動作するかは把握できていない

内容

Promiseのresolve()は、「Promiseクラスのコンストラクタの第1引数に渡す関数内」でしか呼び出してはいけないと思っていたが、
resolve()を参照する変数を別のスコープに用意して、呼び出しても期待通りに動作した
Pormiseオブジェクトを返却する関数を用意しないといけないとも勘違いしていた

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promise</title>
</head>
<body>
<div id="button" style="width:200px; background-color:darkgrey; border: 1px solid black;">Click me!<div>
</body>
<script>
    (async () => {
        let clicked;
        const waitingForYourClick = new Promise(resolve => clicked = resolve);
        const button = document.querySelector("#button");
        button.addEventListener("click", clicked);
        console.log("Waiting");
        await waitingForYourClick;
        console.log("Done");
        button.removeEventListener("click", clicked);
        button.innerHTML = "Clicked!";
    })();
</script>
</html>

感想

async/awaitが好きすぎて、Promiseは書きたくないと思っていたけど、Promiseも好きになれた