To what viewport do media queries in Shadow DOM elements apply?

Question

The HTML5 Rocks tutorial on styling the Shadow DOM doesn't discuss media queries. Since the shadow boundary is supposed to provide style encapsulation for free, it would be really neat if @media queries applied to the size of the host element, rather than the viewport of the browser.

This would solve the problem of media queries being a hack when in reality we need @element queries, which as of July 2015 exist only as an abandoned repo on GitHub.

Answer 1

Alas, no. The @media queries inside the Shadow DOM look at the viewport of the browser, not at the dimensions of the host element.

var root = document.querySelector('div').createShadowRoot();
root.innerHTML = '<style>@media (min-width: 600px) { h3 { color: red; }}</style>' + 
                 '<h3>If this text is not red, you live far in the future</h3>';

<div style="border: 1px solid black; width: 100px"><h3>Light DOM</h3></div>

This is probably because of the circularity issues that might ensue if the Shadow DOM element sized itself in a way incompatible with the host.