JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ol>
    <li><button>Hi</button></li>
  </ol>
</div>

SCSS

div, ol, li, button {
  border-style: solid;
  border-width: 1px;
  padding: 20px 10px;
  border-color: currentColor;
  &:active {
    background: currentColor;
  }
}

div {
  color: red;
}
ol {
  color: green;
}
li {
  color: blue;
}
button {
  color: purple;
  width: 100%;
}

JavaScript

function bind(selector, mode){
  document.querySelector(selector).addEventListener('click', function(event){
    console.log(selector, event.target);
  }, mode);
}

bind('div', false);
bind('  ol', false);
bind('    li', false);
bind('      button', false);

bind('div', true);
bind('  ol', true);
bind('    li', true);
bind('      button', true);