Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> </head> <body> <div id="outer"></div> <script> outer.attachShadow({ mode: 'open' }); let inner = document.createElement('div'); outer.shadowRoot.append(inner); /* div(id=outer) #shadow-dom div(id=inner) */ document.addEventListener('test', event => alert(event.detail)); inner.dispatchEvent(new CustomEvent('test', { composed: true, bubbles: true, detail: "composed" })); inner.dispatchEvent(new CustomEvent('test', { composed: false, bubbles: true, detail: "not composed" })); </script> </body> </html>