<!DOCTYPE html>
<html>
<body>
<style>

#container {
    position: relative;
}

#host {
    width: 90px;
    height: 90px;
    border: solid 5px red;
    outline: none;
}

#host:not(:focus)::after {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 90px;
    height: 45px;
    content: 'FAIL - not focused';
}

#host:focus {
    outline: solid 5px green;
    outline-offset: -5px;
}

#host div {
    background: red;
    width: 90px;
    height: 45px;
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: green;
    display: block;
    width: 100px;
    height: 50px;
}

</style>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div id="container">
<div id="host" tabindex=0><div>FAIL - misplaced</div></div>
<div id="overlay"></div>
</div>
<script>

var host = document.getElementById('host');
var shadow = host.attachShadow({mode: 'closed'});
shadow.innerHTML = `
    <style>
        div { background: green; width: 90px; height: 45px; }
    </style>
    <slot></slot>
    <div></div>
`;

host.getBoundingClientRect();
host.focus();

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