JSFiddle - React, Tailwind, and code Playground

by dfreedm

HTML

<label for="bubbles">Bubbles?</label><input type="checkbox" id="bubbles">
<button id="fire">Fire</button>
<div id="host"></div>
<div id="log"></div>

CSS

#log {
    white-space: pre-wrap;
}

JavaScript

function see(e) {
    log.textContent += 'eventPhase: ' + e.eventPhase + ' target: ' + e.target.id + '\n';
}

var s = host.webkitCreateShadowRoot();
s.innerHTML = '<div id="inner"></div>';
var t = s.firstChild;
host.addEventListener('foo', see );
t.addEventListener('foo', see);
fire.addEventListener('click', function() {
    log.textContent = 'Time: ' + Date.now() + '\n';
    s.firstChild.dispatchEvent(new CustomEvent('foo', {bubbles: bubbles.checked}));
});