聚合物样式不影响宿主元素

Question

我有以下简单的Polymer 1.0自定义元素:

<dom-module id="my-custom-element">
    <style>
        :host {
            display: block;
        }
        .grow {
          min-height: 100%;
          height: 100%;
        }
    </style>
    <template>
        <content></content>
    </template>
</dom-module>
<script>
(function() {
  Polymer({
    is: 'my-custom-element',
    properties: {
    },
    ready: function () {
       //this doesn't work
       this.classList.add('grow');
       //this works (if uncommented)
       //this.style.height = '100%';
       //this.style.minHeight= '100%';
    }
  });
})();

我正在尝试将grow css类添加到主机。由于某些原因，样式只有在我按如下方式单独设置时才会生效:

 this.style.height = '100%';
 this.style.minHeight= '100%';

如果我赋值这个类也没有影响:

 this.classList.add('grow');

为什么会这样?

Answer 1

似乎您希望grow类具有:host特异性?如果是这样，你的CSS是错误的。

<style>
    :host {
        display: block;
    }
    :host.grow {
      min-height: 100%;
      height: 100%;
    }
</style>

Answer 2

我使用的是聚合物1.6.0，我必须使用:

<style>
  :host {
     display: block;
  }
  :host(.grow) {
    min-height: 100%;
    height: 100%;
  }
</style>