Javascript 聚合物样式不影响主体元素

我有以下简单的聚合物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%';

    }
  });
})();

如果我改为指定类，则不会产生任何影响：

 this.classList.add('grow');

---

这是为什么？

似乎您希望

grow

类位于

：主机中？如果是这样，你的CSS是错误的

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


：主持人{
显示：块；
}
：host.grow{
最小高度：100%；
身高：100%；
}

上述方法应该有效。
我使用的是Polymer 1.6.0，我必须使用：

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


：主持人{
显示：块；
}
：主机（.grow）{
最小高度：100%；
身高：100%；
}
在Polymer 1.6.0中，正确的语法是：主机（.grow）
<style>
  :host {
     display: block;
  }
  :host(.grow) {
    min-height: 100%;
    height: 100%;
  }
</style>