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
Post a Comment