styling the Shadow DOM上的HTML5 Rocks教程不讨论媒体查询。由于阴影边界应该免费提供样式封装,如果将@media查询应用于主机元素的大小而不是浏览器的视口,那么它将非常简洁。
这将解决media queries being a hack的问题,而实际上我们需要@element查询,截至2015年7月,查询仅作为abandoned repo on GitHub存在。
答案 0 :(得分:2)
@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元素以与主机不兼容的方式调整自身大小,可能会发生circularity issues。