当 dom-if 为 false 时应用托管自定义元素的高度

Question

聚合物 1.1

即使模板未显示，height: 30% 仍应用于文档，导致空白 space。我知道即使 dom-if 是 false 也会应用它，因为如果我从 :host{} 中删除 height: 30% 那么白色的 space 就会消失。

我能做什么？当模板显示时，我需要将高度应用于 :host。

<dom-module id="portfolio-page">
  <style>
    :host {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 30%;
     }

    section {
      width: 100%;
    }

    @media all and (min-width: 1200px) {
      section {
        width: 90%;
      }
    }
  </style>

  <template>
    <template is="dom-if" if="{{show}}">
      <section>
        <div onclick="page('/')"
          class="vertical layout">
          <div>
              <h2>BLAH</h2>
          </div>
        </div>
      </section>
    </template>
  </template>

  <script>
    Polymer({
      is: "portfolio-page",
      properties: {
        show: {
          type: Boolean,
          value: false
        }
      }
    });
  </script>
</dom-module>

Answer 1

如果您在 "show" 上将 reflectToAttribute 键设置为 true，那么您可以设置如下样式：

<style>
:host[show="true"] {
    height: 30%;
}
</style>

当 dom-if 为 false 时应用托管自定义元素的高度

height on hosted custom element is being applied when dom-if is false

polymer

polymer-1.0