要在哪个视口中应用Shadow DOM元素中的媒体查询？

Question

关于Shadow DOM样式的 HTML5 Rocks教程不讨论媒体查询.由于阴影边界应该是免费提供样式封装,如果将@media查询应用于主机元素的大小而不是浏览器的视口,那么它将非常简洁.

这将解决媒体查询成为黑客的问题,而实际上我们需要@element查询,截至2015年7月,这些查询仅作为GitHub上的废弃仓库存在.

Answer 1

唉，不。Shadow DOM 内的查询@media查看浏览器的视口，而不是宿主元素的尺寸。

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>

这可能是因为如果 Shadow DOM 元素以与宿主不兼容的方式调整自身大小，可能会出现循环问题。