JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<section>
  <button>Test</button>
</section>
<pre></pre>

CSS

button {
  background: white;
}

button.on {
  background: green;
}

JavaScript

const NORMAL_ORDER = false; // CHANGE THIS FOR TESTING

const TRICKLE_DOWN = NORMAL_ORDER ? true : false;
const BUBBLE_UP = NORMAL_ORDER ? false : true;

addEventListener("load", () => {
  const PRE = document.querySelector("pre");

  document.querySelectorAll("section").forEach((button) => {
    button.addEventListener("click", () => {
      PRE.textContent += 'first\n';
    }, TRICKLE_DOWN)
  });

  document.querySelector("section").addEventListener("click", (event) => {
    PRE.textContent += 'second\n';
  }, BUBBLE_UP)
})