¿Por qué no funciona esta función (esperando un elemento en Javascript)?

Básicamente, tenemos una función setTimeout() que espera medio segundo antes de crear un elemento y agregarlo al cuerpo del documento. Luego tenemos una función asíncrona llamada foo() que intenta localizar ese elemento (while(!expresión)) y espera una promesa si aún no puede encontrarlo. La promesa simplemente espera una décima de segundo y se resuelve.

La forma en que visualicé que esto funcione es que las primeras cinco veces que se ejecuta el bucle while, el elemento no se encuentra y la promesa se resuelve. Luego, en la sexta vez, la función setTimeout() en la parte superior crea el elemento y la expresión del bucle while se resuelve como verdadera. Esto significa que se alcanza el console.log() dentro de la expresión foo().then() (y el código puede continuar).

Creo que este es un problema de sincronización. Cuando el código que crea el elemento se saca de la función setTimeout(), el código se ejecuta correctamente, por lo que parece que el bucle while se ejecuta indefinidamente antes de que la función setTimeout() superior pueda activarse. ¿Por qué sucede esto? ¿Hay alguna forma de solucionarlo sin reescribir todo el código? Parece que esta función foo(), que tengo en un código más grande, dejó de funcionar recientemente. ¿Cambió algo en la forma en que los navegadores analizan Javascript?

Nota: La idea detrás de foo() es que lo que escribo dentro de la función then() siempre debe esperar a que se cree el elemento identificado por expresión.

setTimeout(function () {
    const el = document.createElement('div')
    el.id = 'bar'
    el.innerText = 'Bar'
    document.body.appendChild(el)
}, 500)

const promise = new Promise(function(resolve) {
    setTimeout(function() {
       resolve()
    }, 100)
})

async function foo(expresión) {
    while(!expresión) {
        await promise
    }
}

foo(document.getElementById('bar')).then(function() {
    console.log(document.getElementById('bar'))
})