<div id="outer"></div>
<script>
const outer = document.getElementById('outer');
const shadow = outer.attachShadow({ mode: 'open' });
const inner = document.createElement('div');
inner.textContent = 'Click me';
inner.addEventListener('click', event => {
const composedInfo = document.createElement('p');
composedInfo.textContent = 'The event composedPath contains the following elements:';
shadow.appendChild(composedInfo);
const path = event.composedPath();
path.forEach((e) => {
const composedInfo = document.createElement('p');
composedInfo.textContent = e;
shadow.appendChild(composedInfo);
});
});
shadow.appendChild(inner);
</script>