JSFiddle - React, Tailwind, and code Playground

by nonoroazoro

HTML

<div id="outer">
    <div id="inner"></div>
</div>

CSS

#outer {
    width: 200px;
    height: 200px;
    background-color: red;

    display: flex;
    justify-content: center;
    align-items: center;
}

#inner {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

JavaScript

const inner = document.getElementById("inner");
const outer = document.getElementById("outer");

new MutationObserver(() => console.log("mutate"))
    .observe(outer, { attributes: true });

function onClick()
{
    console.log("click");
    setTimeout(() => console.log("timeout"), 0);
    Promise.resolve().then(() => console.log("promise"));
    outer.setAttribute("data-mutation", Math.random());
}

inner.addEventListener("click", onClick);
outer.addEventListener("click", onClick);

inner.click();