<!DOCTYPE html>
<html>
<head>
<style>
my-host {
    display: block;
    width: 100px;
    height: 100px;
    background: purple;
}
</style>
</head>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<my-host>Hover over this text</my-host>

<script>
const host = document.querySelector('my-host');
host.attachShadow({mode: 'closed'}).innerHTML = `
<div id="container"><span><slot></slot></span></div>
<style>
#container {
    width: 80px;
    height: 80px;
    padding: 10px;
    background: red;
}
#container:hover {
    background: green;
    color: green;
}
span {
    background: green;
}
</style>`;

if (window.eventSender)
    eventSender.mouseMoveTo(host.offsetLeft + 15, host.offsetTop + 15);

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