<!DOCTYPE html>
<html>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<script>
const host = document.createElement('div');

const shadowRoot = host.attachShadow({mode: 'closed'});
shadowRoot.innerHTML = `
<some-element class="item">
    some-element:first-child
    <style>
    .item { display: block; width: 100px; height: 10px; background: red; color: green; font-size: 9px; overflow: hidden; }
    :matches(noop, some-element:first-child) { background: green; }
    :matches(noop, section:nth-of-type(1)) { background: green; }
    :matches(noop, section:nth-child(3)) { background: green; }
    :matches(noop, .item:nth-last-child(6)) { background: green; }
    :matches(noop, a-element:first-of-type) { background: green; }
    :matches(noop, b-element:only-of-type) { background: green; }
    :matches(noop, a-element:last-of-type) { background: green; }
    :matches(noop, c-element:nth-last-of-type(1)) { background: green; }
    :matches(noop, other-element:last-child) { background: green; }
    </style>
</some-element>
<section class="item">section:nth-of-type(1)</section>
<section class="item">section:nth-child(3)</section>
<section class="item">.item:nth-last-child(6)</section>
<a-element class="item">a-element:first-of-type</a-element>
<b-element class="item">b-element:only-of-type</b-element>
<a-element class="item">a-element:last-of-type</a-element>
<c-element class="item">c-element:nth-last-of-type(1)</c-element>
<other-element class="item">other-element:last-child</other-element>`;
document.body.appendChild(host);

const loneHost = document.createElement('div');
const loneShadowRoot = loneHost.attachShadow({mode: 'closed'});
loneShadowRoot.innerHTML = `<div class="item">.item:only-child
<style>
.item { display: block; width: 100px; height: 10px; background: red; color: green; font-size: 9px; overflow: hidden; }
:matches(noop, .item:only-child) { background: green; }
</style>
</div>`;
document.body.appendChild(loneHost);

for (const element of [...shadowRoot.querySelectorAll('.item'), loneShadowRoot.firstChild]) {
    const selector = element.innerText;
    if (!element.matches(`:matches(noop, ${selector}`))
        logError(`${selector} did not match an element via element.matches`);
    else {
        const queryResult = element.getRootNode().querySelectorAll(`:matches(noop, ${selector}`);
        if (queryResult.length != 1) {
            console.log(queryResult);
            logError(`${selector} matches ${queryResult.length} elements`);            
        }
    }
}

function logError(error) {
    const container = document.createElement('p');
    container.textContent = error;
    document.body.append(container);
}

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