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

Question

I have the following simple Polymer 1.0 custom element:

<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%';

    }
  });
})();

I'm trying to add the grow css class to the host. For some reason the styles only take affect if I set them individually as follows:

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

It has no affect if instead I assign the class:

 this.classList.add('grow');

Why is this?

Answer 1

Seems like you want the grow class to be in the :host specificity? If so, your CSS is wrong.

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

The above should work.

Answer 2

I am using Polymer 1.6.0, and I have to use:

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