Source Code: (back to article)
<button id="sender">Send Message</button>

<script>
// Listener in another component
document.addEventListener('componentMessage', function(event) {
alert('Received message: ' + event.detail.message);
});

document.getElementById('sender').addEventListener('click', function() {
// Create and dispatch the custom event
let customEvent = new CustomEvent('componentMessage', {
detail: { message: 'Hello from another component!' },
bubbles: true,
cancelable: true
});
document.dispatchEvent(customEvent);
});
</script>