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


the html5 rocks tutorial on styling shadow dom doesn't discuss media queries. since shadow boundary supposed provide style encapsulation free, neat if @media queries applied size of host element, rather viewport of browser.

this solve problem of media queries being hack when in reality need @element queries, of july 2015 exist abandoned repo on github.

alas, no. @media queries inside shadow dom @ viewport of browser, not @ dimensions of host element.

var root = document.queryselector('div').createshadowroot();  root.innerhtml = '<style>@media (min-width: 600px) { h3 { color: red; }}</style>' +                    '<h3>if text not red, live far in future</h3>';
<div style="border: 1px solid black; width: 100px"><h3>light dom</h3></div>

this because of circularity issues might ensue if shadow dom element sized in way incompatible host.


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -