JSFiddle - React, Tailwind, and code Playground

by dfreedm

HTML

<div>If host element turns red, it saw the non-bubbling event</div>
<button id="fire">Fire</button>
<div id="host"></div>

CSS

#host.see {
    border: 2px solid red;
    background: red;
}
#host {
    border: 2px dotted green;
    height: 100px;
    width: 100px;
}

JavaScript

host.addEventListener('foo', function(e){
    e.target.classList.add('see');
    console.log('bubbles:', e.bubbles, 'phase:', e.eventPhase, e);
});
var s = host.webkitCreateShadowRoot();
s.innerHTML = '<div></div>';
fire.addEventListener('click', function() {
    s.firstChild.dispatchEvent(new CustomEvent('foo', {bubbles: false}));
});