阴影DOM元素中的媒体查询应用于哪个视口？

Question

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

这将解决媒体查询被黑客攻击的问题，而实际上我们需要@element查询，而截至2015年7月，@element查询仅作为GitHub上废弃的回购存在。

Answer 1

唉，不。Shadow中的@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元素以与主机不兼容的方式调整自身大小，则可能会产生循环性问题。