An X-Tag Web Component that provides Element Query capabilities
<x-querybox media="query(small-width, (max-width: 300px))">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</x-querybox>
x-querybox[matched-media~="small-width"] {
font-size: 50%; /* small text for a wee lil element! */
}
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!
}
});