如何在Polymer中基于媒体查询设置:host {}？

Question

我必须在:root元素上设置高度，否则在有滚动条时无法获得所需的视口大小。然而，只有当视口小于900px时，我才想设置height: calc(100% - 130px);。

由于我不能使用@media查询，因此我该怎么做呢？我尝试过以下方法，但没有成功：

<template>
    <style include="iron-flex iron-flex-alignment">
     :host[show] {
       background-color: var(--pink-color);
       width: 100%;
       overflow-x: hidden;
       overflow-y: auto;
       outline: none;
       display: flex;
     }

     :host[smallScreen] {
       height: calc(100% - 130px);
     }

    <div hidden$="{{!show}}">
      <iron-media-query query="(max-width: 899px)"
         query-matches="{{smallScreen}}"></iron-media-query>
...
 <script>
    Polymer({
      is: 'video-selection',
      properties: {
        show: {
          type: Boolean,
          value: true,
          reflectToAttribute: true
        },
        smallScreen: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        }
      },

- dman

---

跟进 http://stackoverflow.com/questions/36783006/cant-style-element-in-shadow-dom-in-media-query - Günter Zöchbauer

Answer 1

我认为您需要：

 :host([small-screen]) {
   height: calc(100% - 130px);
 }

JSBin example

- Günter Zöchbauer

---

仍未应用。我还尝试了:host([smallScreen])。 - dman

你在开发工具中检查了 smallScreen 属性是否已经添加了吗？ - Günter Zöchbauer

small-screen属性已添加至HTML元素中。但是在开发工具样式中，我只看到了.video-selection-0[show]且没有设置height的情况，并没有.video-selection-0[smallScreen]。 - dman

就是这样！真是个疯狂的坑。通常，HTML 以外的所有内容都是蛇形命名法，并自动转换为 HTML。谢谢，我从未想过这一点。 - dman