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

我正在使用Polymer 1.6.0，我必须使用：

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

聚合物样式不会影响主机元素

2 个答案: