<!DOCTYPE html>
<html>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div id="host"></div>
<style>
#host > div { width: 100px; background: green; }
#host > div:first-of-type { height: 70px; }
#host > div:last-of-type { height: 30px; }
</style>
<script>

const shadowRoot = host.attachShadow({mode: 'closed'});

const child1 = document.createElement('div');
child1.slot = 'slot1';
host.appendChild(child1);

const slot1 = document.createElement("slot");
slot1.name = 'slot1';
shadowRoot.append(slot1);

const child2 = document.createElement('div')
child2.slot = 'slot2';
host.appendChild(child2);

const slot2 = document.createElement("slot");
slot2.name = 'slot2';
shadowRoot.append(slot2);

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