<!DOCTYPE html>
<html>
<body>
<shadow-host><span>5</span><span slot="bar">2</span></shadow-host>
<input type="text">
<script>
const shadowRoot = document.querySelector('shadow-host').attachShadow({mode: 'closed'});
shadowRoot.innerHTML = `
    <span>1</span>
    <inner-host>
        <slot name="bar" slot="foo"><span>FAIL - named slot fallback</span></slot>
        <span>FAIL - unassigned content</span>
        <span slot="foo">3</span>
    </inner-host>
    <slot><span>FAIL - default slot fallback</span></slot>
    <span>6</span>`;
const innerHost = shadowRoot.querySelector('inner-host');
innerHost.attachShadow({mode: 'closed'}).innerHTML = `
    <slot name="foo"></slot>
    <span>4</span>`;

document.addEventListener('testnormalworld', function (event) {
    alert(window[event.detail] ? `FAIL: ${event.detail} was present in the normal world` : `PASS: ${event.detail} was not present in the normal world`);
});

</script>
</body>
</html>