JSFiddle - React, Tailwind, and code Playground

by pmdartus

JavaScript

const host = document.createElement('div');
host.attachShadow({ mode: 'open' });

const p = document.createElement('p');
host.shadowRoot.appendChild(p);

const span = document.createElement('span');
p.appendChild(span);

const handler = evt => console.log(evt.type, evt.target, evt.currentTarget);

host.addEventListener('test', handler);
host.shadowRoot.addEventListener('test', handler);
p.addEventListener('test', handler);
span.addEventListener('test', handler);

span.dispatchEvent(new CustomEvent('test', { composed: true, bubbles: false }));