<div id=test><span>Text</span></div>
<script>
const shadow = test.attachShadow({mode: 'open'});
shadow.innerHTML = `
    <style>
    @media (min-width:200px) {
        div { color: green }
        :host { background-color: lightgrey }
    }
    @media (max-width:200px) {
        ::slotted(*) { color: red }
    }
    </style>
    <div><slot></slot></div>
`;
</script>