<div id="container"></div>
<script>
const container = document.getElementById('container');
const shadow = container.attachShadow({ mode: 'open' });
const button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', () => {
const event = new CustomEvent('customEvent', { bubbles: true, composed: true });
button.dispatchEvent(event);
});
shadow.appendChild(button);
container.addEventListener('customEvent', () => {
const composedInfo = document.createElement('p');
composedInfo.textContent = `Custom Event Triggered!`;
shadow.appendChild(composedInfo);
});
</script>