<!DOCTYPE html>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div id="t1">
    <span>FAIL</span>
</div>
<div id="t2">
    <span slot="second-slot">FAIL</span>
</div>
<div id="t3">
    <span>FAIL</span>
</div>
<div id="t4">
    <span>FAIL</span>
</div>
<div id="t5">
    <span selected>FAIL</span>
</div>
<div>
</div>
<script>

function attachShadow(host, selector)
{
    const shadow = host.attachShadow({mode: 'closed'});
    shadow.innerHTML = `
    <style>
    :host {
        width: 100px;
        height: 20px;
        background: green;
        color: red;
    }
    ${selector} {
        color: green;
    }
    </style>
    <slot></slot>
    <slot name="second-slot"></slot>`;
    return shadow;
}

{
    const host = document.querySelector('#t1');
    attachShadow(host, '::slotted(.selected)');
    const span = host.querySelector('span');
    getComputedStyle(span).backgroundColor;
    span.className = 'selected';
}

{
    const host = document.querySelector('#t2');
    attachShadow(host, '[name=second-slot]::slotted(#selected)');
    const span = host.querySelector('span');
    getComputedStyle(span).backgroundColor
    span.id = 'selected';
}

{
    const host = document.querySelector('#t3');
    attachShadow(host, '::slotted([selected])');
    const span = host.querySelector('span');
    getComputedStyle(span).backgroundColor;
    span.setAttribute('selected', 'selected');
}

{
    const host = document.querySelector('#t4');
    const shadow = host.attachShadow({mode: 'closed'});
    shadow.innerHTML = `<div><slot></slot></div>`;
    const deepHost = shadow.querySelector('div');
    attachShadow(deepHost, '::slotted(.selected)');
    const span = host.querySelector('span');
    getComputedStyle(span).backgroundColor;
    span.className = 'selected';
}

{
    const host = document.querySelector('#t5');
    const shadow = host.attachShadow({mode: 'closed'});
    shadow.innerHTML = `<div><slot slot="second-slot"></slot></div>`;
    const deepHost = shadow.querySelector('div');
    attachShadow(deepHost, '[name=second-slot]::slotted(:not([selected]))');
    const span = host.querySelector('span');
    getComputedStyle(span).backgroundColor;
    span.removeAttribute('selected');
}

</script>