x-querybox[matched-media~="small-width"] {
font-size:50%; /* small text for a wee lil element! */
}
Adding mediachange Event Listeners:
document.querySelector('x-querybox').addEventListener('mediachange',function(e){if(e.detail.indexOf('small-width')>-1){// the 'small-width' query is active, do some smally-widthy stuff!}});