JSFiddle - React, Tailwind, and code Playground

by dfreedm

HTML

<div>If host element turns red, he 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>';
var t = s.firstChild;
t.addEventListener('foo', function(e) {
    e.stopPropagation();
    if (e.stopImmediatePropagation) {
        e.stopImmediatePropagation();
    }
});
fire.addEventListener('click', function() {
    t.dispatchEvent(new CustomEvent('foo', {bubbles: false}));
});