Question

聚合物1.1

即使未显示模板，height: 30%仍然会应用于文档，从而导致出现空白空白。我知道即使dom-if为false，它也会被应用，因为如果我从height: 30%移除:host{}，那么空白区就会消失。

我该怎么办？当模板显示时，我需要将高度应用于: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时，正在应用托管自定义元素的高度

1 个答案: